在嵌套组件上使用react-i18next

Question

我对复杂反应应用的多语言支持有疑问.所有示例和文档都基于没有嵌套/子组件的"扁平"应用程序.

如何处理嵌套的数据如下:

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

我应该用translateHOC 包装每个儿童成分吗？或者还有其他方法可以将翻译功能传递给子组件？

Answer 1

不久前我遇到了同样的问题.我找到了4种解决方案.

1. 传递t给每个组件.这个非常烦人,导致很多错误,因为我忘了一直把它传下来.

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

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

4. 这是我最喜欢的解决方案,我最终直接使用i18next,因为你可以随时随地访问t(),而无需编写额外的代码.

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

import i18next from 'i18next';

i18next.t('parentKey.childKey');

Answer 2

您还可以通过外部组件的常规道具将其传递下来。

就像使用 Translate hoc 包装的容器组件和内部组件一样，您只需t通过 props 传递函数即可。