Question

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

我有使用i18next jQuery和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键。我只想直接看到加载的值（“我的家”）。

您可以将此问题视为我上传的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

<div ng-app>
  <div ng-controller="BreadCrumbs">
      <div ng-repeat="bc in ui.mdBreadCrumbs">
          <a ng-href="{{bc.path}}">{{bc.label}}</a>
      </div>
  </div>
</div>

Answer 2

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

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

在React I18next中，首先进行初始化，显示json密钥

2 个答案: