时间戳

首页 > 解决方案 > 在所有嵌套组件上使用 react i18next

javascript - 在所有嵌套组件上使用 react i18next

问题描述

我有一个关于复杂React应用程序的多语言支持的问题。所有示例和文档都基于没有嵌套/子组件的“平面”应用程序。

如何处理这样嵌套的数据：

<i18n>
    <App>
        translate('base')(
          <Base>
              <Child1 />
              <Child2 />
              {t('Hello')}
          </Base>
        )
    </App>
</i18n>

translate我应该用HOC包装每个子组件吗？
还有其他方法可以将翻译功能传递给子组件吗？

标签： javascriptreactjsi18nextreact-i18next

解决方案

不久前我遇到了同样的问题。我为此找到了 4 个解决方案。

  1. 传递t到每个组件。这很烦人，并导致很多错误，因为我一直忘记传递它。

  2. 使用 react-i18next 提供的 NamespacesConsumer 上下文。这也很烦人，语法有时太奇怪和重复。这也可能对性能不利，因为组件可能会经常重新渲染。

  3. 使用withNamespacesreact-i18next 提供的 HOC，这是一个很好的选择，它易于阅读并且不会被翻译语法污染你的代码。它也比前两个选项更有效。

  4. 这是我最喜欢的解决方案，我最终直接使用 i18next，因为您可以开箱即用地访问t()任何地方，而无需额外的代码。

如果你想保留 react-i18next，我建议你使用 HOC，它更容易调试、测试和开发。但老实说，我认为 i18next 做得更好。我最初使用 react-i18next 是因为我认为这是一种反应方式，但使用它只是一种痛苦，react-i18next 有很多错误，而且要编写更多代码。使用 i18next 就这么简单 

import i18next from 'i18next';

i18next.t('parentKey.childKey');

推荐阅读