在 React I18next 中，首先初始化，显示 json key答案

【问题标题】：In React I18next, first initialization, shown json key在 React I18next 中，首先初始化，显示 json key
【发布时间】：2017-02-08 05:46:33
【问题描述】：

为了国际化，我使用了 i18next。

我有使用 i18next jQuery 和 ReactJS 的经验。

现在我使用i18next for ReactJS。

但我有一个问题。

在 jQuery 中，可以将 Value 设置为默认值。

例如

<!-- Standard -->
<li data-i18n="nav.home"></li>

<!-- below code also available -->
<li data-i18n="nav.home">MY HOME</li>

以上代码，应用“HOME”作为默认值。

但是 React-i18n，不能设置默认值。

因此，当第一次初始化网页时，显示 Json 密钥第二次。

像这样

<!-- set a -->
const {t} = this.props;
<li>{ t(nav.home) }</li>

我不想看到 json 键。我只想直接看到加载的值（“MY HOME”）。

你可以看到这个问题是我上传的Youtube video

或者我选择我的解决方案来使用i18next event listener。

// In constructor
this.state = { i18nLoaded : false }

// In componentWillMount
i18next.on('initialized', () => {
    this.setState({ i18nLoaded : true })
});

// In Render
const {t} = this.props;
return (
    <div>
        {
            this.state.i18nLoaded ? 
                <li>{ t(nav.home) }</li> 
            : ""
        }
    </div>
)

我选择使用事件监听器在 i18next 初始化后渲染组件的方法。但它看起来不完整。

有人知道这个问题的解决方法吗？

【问题讨论】：

标签： javascript reactjs internationalization i18next

【解决方案1】：

使用选项在 react-i18n 中设置默认值。 i18next API

const {t} = this.props;
<li>{ t(nav.home, {defaultValue : "MY HOME"}) }</li>

【讨论】：

【解决方案2】：

解决方案是使用 react-i18next：https://github.com/i18next/react-i18next

你可以在翻译 hoc 上设置等待标志。

【讨论】：