Question

我有一个用React和support挂钩编写的项目。我正在尝试使用react-i18next支持翻译。按照我的说明文档，一切正常。

但是，当我想在助手/非组件.js文件上使用t()函数时，我偶然发现了一些问题。然后，我通过直接从看起来像这样的初始化文件./i18n.ts中导入i18n来解决了该问题

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钩子/ withTranslation HOC（如果您可以这样导入）？我读到useTranslation适用于暂记，但initReactI18next似乎也默认适用于暂记。

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

Answer 1

我在他们的github问题上找到了this的答案。

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

update them to new language value based on event triggered by i18next: https://www.i18next.com/overview/api#onlanguagechanged
or better have only the keys in the constants and translate as close to the rendering as possible

react-i18next-导入i18n实例并直接使用vs使用useTranslation钩子

1 个答案: