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

如何处理像这样嵌套的数据:

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

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

请您参考如下方法:

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

1. 将t传递给每个组件。这个非常烦人，并且会导致很多错误，因为我总是忘记将它传递下去。

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

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

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

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

import i18next from 'i18next'; 
 
i18next.t('parentKey.childKey');