12

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

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

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

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

4

4 回答 4

16

不久前我遇到了同样的问题。我为此找到了 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');
于 2019-01-18T19:11:01.027 回答
2

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

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

于 2018-08-02T19:22:01.713 回答
1

如果您在编写 React 组件时使用的是hooksuseTranslation ，而不是类（像我一样），那么您可以使用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包装器一样，需要在每个使用翻译的文件中导入（挂钩）。

于 2019-08-20T07:33:01.797 回答
1

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

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

优点：

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