如何使用 next-i18next

时间:2020-12-20 14:06:01

标签: reactjs next.js i18next react-i18next next-i18next

我有两个存储库。一个带有 nextjs 应用程序,第二个带有正在动态加载到第一个存储库中的组件。

由于第二个 repo 中的一些组件包含翻译,我需要传递一个 t 函数或一个 i18n 实例(翻译文件和 next-i18next 初始化在第一个 repo 中) .

我尝试使用上下文提供程序传递它,但是没有用:

<块引用>

TypeError: 无法读取未定义的属性“translator”

有没有推荐的方法来实现这一目标?

1 个答案:

答案 0 :(得分:0)

由于在运行时你的组件共享同一个 React“树”,有很多方法可以实现你的要求:

  1. 传递 t 方法本身 - 在您的组件与其环境之间创建一对。
<InnerComponent t={t} />
  1. 将已翻译的文本传递给组件 - 您的组件可能保持“通用”用途。但有时大型组件可能需要很多文本,会造成大量道具。
<InnerComponent title={t('MY_TITLE')} />

每种方法都有优缺点,决定哪种方法适合您的要求。