reactjs - 如何使用 next-i18next 将 i18n 或 t 函数传递给依赖项

Question

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

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

我尝试使用上下文提供程序传递它，但这不起作用：

TypeError：无法读取未定义的属性“翻译器”

有什么推荐的方法来实现这一目标吗？

Answer 1

由于在运行时您的组件共享相同的 React “树”，因此有很多方法可以满足您的要求：

1. 传递t方法本身 - 在您的组件和它的环境之间创建一对。

<InnerComponent t={t} />

2. 将已翻译的文本传递给组件 - 您的组件可能仍然是“通用”用途。但有时大型组件可能需要很多文本，会导致大量的道具。

<InnerComponent title={t('MY_TITLE')} />

每种方法都有优缺点，决定什么适合您的要求。