react-i18next - 导入 i18n 实例并直接使用与使用 useTranslation 挂钩

Question

我有一个用 React 编写的项目并支持 hooks。我正在尝试使用react-i18next 来支持翻译。一切正常，因为我遵循了文档。

然而，当我想t()在助手/非组件 .js 文件上使用该函数时，我偶然发现了一些问题。然后，我通过直接从 init 文件导入 i18n 来解决这个问题，./i18n.ts如下所示

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) 
  .init({
    resources,

    ns: [
      'common',
      'dashboard',
      'landing'
    ],
    defaultNS: 'common',

    fallbackLng: 'en',
    supportedLngs: ['de', 'en'],
    interpolation: {
      escapeValue: false, 
    },
  });

export default i18n;

我意识到我根本不必使用钩子，因为我可以在代码中的任何地方使用它，甚至在我的功能组件文件上

import i18n from "@root/i18n"

...
i18n.t('namespace:path')

我想知道如果你可以像这样导入它，为什么建议使用useTranslation钩子/ HOC？withTranslation我读到useTranslation应用悬念，但似乎initReactI18next默认情况下也应用了悬念。

我很好奇不使用推荐的钩子/HOC 是否有任何副作用？

Answer 1

我在他们的 github issues 上找到了这个答案。

但这些常量永远不会在 languageChange 上更新！所以要么：

• 根据 i18next 触发的事件将它们更新为新的语言值：https://www.i18next.com/overview/api#onlanguagechanged
• 或者最好只有常量中的键并尽可能接近渲染