withTranslation HOC 仅在第一个命名空间中查找翻译

Question

我正在将我的项目从 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 键：

如果我在 withTranslation 调用

中更改 about 和 application 的顺序

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 未突出显示此行为的任何更改。

Answer 1

react-i18next 自版本 10.0.0 以来没有 nsMode。但是 this pull request 将其添加回来（在 10.7.0 中发布）。

只需按命名空间 (ns:key) 添加前缀即可翻译文本（即使不将命名空间传递给 withTranslation 或 useTranslation）：

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。

Answer 2

我遇到了描述的相同问题（省略了 withTranslation 函数中指定的 ns），在寻找解决方案但没有找到任何东西后，我尝试了一些不同的方法，这是正确的解决方案。

您可以配置要使用的命名空间，而不是命名空间的前缀键：

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

您可以继续使用前缀键访问其他命名空间的值。

希望对你或遇到同样问题的人有所帮助。

withTranslation HOC 仅在第一个命名空间中查找翻译

withTranslation HOC looks for translation in first namespace only

i18next

react-i18next