javascript - 在React I18next中，第一次初始化，显示为json键

为了国际化，我使用了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初始化后呈现组件的方法。但这看起来并不完整。

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

最佳答案

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

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

关于javascript - 在React I18next中，第一次初始化，显示为json键，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42105600/