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

Question

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

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

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

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

Answer 1

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

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

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

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

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

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

import i18next from 'i18next';

i18next.t('parentKey.childKey');

Answer 2

您也可以通过外部组件的常规道具传递它。

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

Answer 3

最好的方法是用 React.Context 包装你的主组件，并将t prop 作为上下文传递，并让它在每个嵌套的子组件中都可以访问。

我也在这样的应用程序中使用本地化。

优点：

• 当每个组件都用 hOC 包装时，不会破坏子层次结构
• 将来，如果您决定选择另一个库进行本地化，您只需更改该 Context 的主要 Provider 组件，它将在您的整个应用程序中更新实现。
• 由于翻译最初是加载的，因此您的上下文不会更新并且重新渲染问题不会一次又一次地出现。

Answer 4

如果您在编写 React 组件时使用hooks而不是类（像我一样），那么您可以使用useTranslation hook：

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
  const { t, i18n } = useTranslation();
  // or const [t, i18n] = useTranslation();

  return <p>{t('my translated text')}</p>
}

这就像withTranslation包装器一样，需要在每个使用翻译的文件中导入（钩子）。