子包中的翻译

Question

我正在尝试翻译我的 React 应用程序中的一些内容。这适用于 i18next 和 react-i18next。我使用 withNamespaces HOC 来呈现翻译并使用 PoEdit 扫描它们。到目前为止一切顺利。

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

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

我的第二个问题是如何扩展翻译？例如，我有一个将字段 A 翻译为 "How are you doing?" 的库。然而，当运行为客户创建一个项目时，我注意到客户想要对库中的某些内容进行另一种翻译。有没有办法覆盖它？因为翻译当然是捆绑在一起的，并在组件内部加载。

下面是一些代码：

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);

Answer 1

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

npm i i18next@latest react-i18next@latest

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

子包中的翻译

Translations in a sub package

reactjs

i18next

react-i18next