Question

我正在尝试翻译我的React应用程序中的某些内容。这对于i18next和react-i18next可以正常工作。我使用withNamespaces HOC渲染翻译并使用PoEdit对其进行扫描。到目前为止一切顺利。

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

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

我的第二个问题是我如何扩展翻译？例如，我有一个将该字段A转换为“您最近好吗？”的库。但是，当为客户运行项目时，我注意到客户希望对库中的某些内容进行另一次翻译。有没有办法覆盖它呢？由于事实，翻译当然是捆绑在一起的，并在内部加载到组件中。

下面是一些看起来如何的代码：

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。一切正常。

子包中的翻译

1 个答案: