Javascript 在React I18next中，第一次初始化显示json键

为了实现国际化，我使用了i18next

我有使用i18nextjquery和ReactJS的经验

现在我用

但我有个问题

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

比如说

<!-- 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> 

const{t}=this.props；
{t（导航主页）}

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

你可以看到这个问题，因为我上传

或者，我选择要使用的解决方案

//在构造函数中
this.state={i18nLoaded:false}
//以组件形式安装
i18next.on（'initialized'，（）=>{
this.setState（{i18nLoaded:true}）
});
//渲染中
const{t}=this.props；
返回(
{
这个州是什么地方？
{t（导航主页）}
: ""
}
)

我选择在I18下一次初始化后使用事件侦听器渲染组件的方法。但它看起来像是不完整的

---

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

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

const{t}=this.props；
{t（nav.home，{defaultValue:“我的家”}}

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

const{t}=this.props；
{t（nav.home，{defaultValue:“我的家”}}

解决方案将使用react-I18下一步：

---

您可以在translate hoc上设置等待标志。

解决方案将使用react-i18next：

您可以在translate hoc上设置等待标志

// 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>
)

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