withTranslation HOC仅在第一个名称空间中寻找翻译

时间:2019-04-09 18:02:17

标签: i18next react-i18next

我正在将项目从i18next^11.0.0升级到i18next^15.0.0,并将react-i18next^7.0.0升级到react-i18next^10.0.0。我以前使用过translate HOC,但现在似乎已被withTranslation取代。因此,经过这些更改后,我的简单React组件看起来像:

import React from 'react';
import { withTranslation } from 'react-i18next';

const AboutControl = props => {
  const { t } = props;

  return (
    <div className="about-control">
      <p className="about-control-application-name">
        {t('name')} {VERSION}
      </p>

      <p>
        {t('supported-browsers')}:
      </p>

      <ul>
        <li>Google Chrome >= 55</li>
        <li>Mozilla Firefox >= 53</li>
      </ul>
    </div>
  );
};

export default withTranslation(['about', 'application'])(AboutControl);

supported-browsers键的转换在about命名空间中定义,而name键的转换在application命名空间中定义。但是,在上述示例中,新版本的库不会翻译name键:

如果我在about通话中更改了applicationwithTranslation的顺序

export default withTranslation(['application', 'about'])(AboutControl);

一切都反过来({supported-browsers未翻译):

在旧版本的react-i18next nsMode option was available中,该问题已解决,但不再起作用:

await i18next.init({
  whitelist: this.languages,
  lng: this.language || this.languages[0],
  fallbackLng: this.languages[0],
  lowerCaseLng: true,
  debug: false,
  resources: {},
  interpolation: {
    escapeValue: false // not needed for React
  },
  react: {
    wait: true,
    nsMode: true
  }
});

documentation中没有发现与此相关的任何内容。这里是一个例子:

// load multiple namespaces
// the t function will be set to first namespace as default
withTranslation(['ns1', 'ns2', 'ns3'])(MyComponent);

看起来不需要任何其他选项,否则我想知道如果不翻译组件的文本应该传递什么名称空间。是虫子吗?还是存在任何解决方法?

Migration guide from 9 to 10没有突出显示此行为的任何变化。

2 个答案:

答案 0 :(得分:0)

自版本react-i18next起,

nsMode没有10.0.0。但是this pull request将其重新添加(发布在10.7.0中)。

只需通过名称空间(withTranslation前缀键,就可以翻译文本(甚至不将名称空间传递到useTranslationns:key):

import React from 'react';
import { withTranslation } from 'react-i18next';

const AboutControl = props => {
  const { t } = props;

  return (
    <div className="about-control">
      <p className="about-control-application-name">
        {t('application:name')} {VERSION}
      </p>

      <p>
        {t('about:supported-browsers')}:
      </p>

      <ul>
        <li>Google Chrome >= 55</li>
        <li>Mozilla Firefox >= 53</li>
      </ul>
    </div>
  );
};

export default withTranslation()(AboutControl);

load translation resources asynchronously时,需要将名称空间传递给withTranslation,以确保它们在呈现之前可用。

答案 1 :(得分:0)

我遇到了相同的问题(省略了withTranslation函数中指定的ns),在寻找解决方案但未找到任何内容之后,我尝试了不同的方法,这是正确的解决方案。

您可以使用以下方法配置名称空间以在启动时使用:而不是使用名称空间的前缀键。

const {t,i18n} = useTranslation('yourNSname');

我希望它可以帮助您或遇到相同问题的人。