失败的道具类型:提供给`Button`的`object`类型的无效道具`label`,期望的`string`

时间:2017-04-11 14:46:27

标签: javascript reactjs react-redux

在我的反应应用程序中,我得到了很多这样的警告:

enter image description here

它可能会从此返回:

<Button icon='save' type="submit" label={<T value="processes.new.save"/>} raised primary />

有没有办法解决这个问题?

由于

语言选择器:

Bevore我改变了它的翻译风格..

import React, {Component} from 'react';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {loadTranslations, setLocale, syncTranslationWithStore, i18nReducer} 
from 'react-redux-i18n';

import {de} from '../locales/de';
import {en} from '../locales/en';
export const translationsObject = {
    de: de,
    en: en
};

const store = createStore(
    combineReducers({
        i18n: i18nReducer
    }),
    applyMiddleware(thunk)
);
syncTranslationWithStore(store)
store.dispatch(loadTranslations(translationsObject));
store.dispatch(setLocale('de'));

function getLanguage() {
    const myState = store.getState();
    const local = myState.i18n.locale;
    return local;
}

class LanguageChooser extends Component {
    render() {
        return (
            <div>
                <li><a className="fa fa-language fa-2x" onClick={this.changeLanguage} aria-hidden="true"></a></li>
            </div>
        );
    }
    changeLanguage(e) {
        e.preventDefault();
        if (getLanguage() === "de") {
            store.dispatch(setLocale('en'));
        } else {
            store.dispatch(setLocale('de'));
        }
    }
}

export default LanguageChooser;

问题是什么?我没有错误

1 个答案:

答案 0 :(得分:1)

  

如果由于某种原因,您无法使用这些组件,则可以使用   改为I18n.t和I18n.l助手:

var I18n = require('react-redux-i18n').I18n;

I18n.t('application.title'); // => returns 'Toffe app met i18n!' for locale 'nl'

这是你的情况,&#34;原因&#34;您不想使用组件是因为您需要将翻译后的文本作为string道具传递给Button组件。

所以,你可能想要这样的东西:

import {I18n} from 'react-redux-i18n';

然后

<Button icon='save' type="submit" label={ I18n.t('processes.new.save') } raised primary />

警告应该消失。