子包中的翻译答案

【问题标题】：Translations in a sub package子包中的翻译
【发布时间】：2018-11-20 01:03:39
【问题描述】：

我试图在我的 React 应用程序中翻译一些东西。这适用于 i18next 和 react-i18next。我使用 withNamespaces HOC 渲染翻译并使用 PoEdit 扫描它们。到目前为止一切顺利。

但是，我面临两个问题。我还有一个包含我所有 UI 组件的库。更像是从语义用户界面本身扩展的所有样式。那里也有一些翻译适用，我也想在那里使用相同的react-i18next。虽然在故事书中测试一切看起来都不错，但是当我运行 npm link 并将包链接到我的主应用程序时，我突然收到此错误：

caught TypeError: (0 , _reactI18next.withNamespaces) is not a function

我的第二个问题是如何扩展翻译？例如，我有这个库，它将字段 A 翻译为“你好吗？”。但是，在为客户运行项目时，我注意到客户想要对 lib 中的某些内容进行另一种翻译。那么有没有办法覆盖它？因为翻译当然是捆绑在一起并在组件内部加载的。

下面是一些代码：

import i18n from 'i18next';
import { reactI18nextModule } from 'react-i18next';
import XHR from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(XHR)
  .use(LanguageDetector)
  .use(reactI18nextModule)
  .init({
    load: 'languageOnly',
    backend: {
      loadPath: '../dist/locales/{{lng}}/{{ns}}.json'
    },
    fallbackLng: {
      'en-US': ['en']
    },
    ns: ['uielements'],
    defaultNS: 'uielements',
    fallbackNS: 'uielements',
    debug: false,
    keySeparator: '##',
    interpolation: {
      escapeValue: false // not needed for react!!
    },
    react: {
      wait: true,
      bindI18n: 'languageChanged loaded',
      bindStore: 'added removed',
      nsMode: 'default'
    }
  });

export default i18n;

还有组件本身：

export default withNamespaces()(Dialog);

【问题讨论】：

标签： reactjs i18next react-i18next

【解决方案1】：

我遇到了同样的问题。原来在 react-i18next 8.0.0 版本中引入了 withNamespaces HOC 组件。确保您拥有最新版本：

npm i i18next@latest react-i18next@latest

我刚刚检查了 i18next v12.0.0 和 react-i18next v8.3.8。一切正常。

【讨论】：