javascript - 在 React I18next 中，首先初始化，显示 json key

Question

为了国际化，我使用了 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 key。

像这样

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

我不想看到 json 键。我只想直接看到加载的值(“我的家”)。

您可以将此问题视为 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 初始化之后渲染组件的方法。但它看起来像不完整。

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

Answer 1

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

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