我正在将我的项目从i18next^11.0.0
toi18next^15.0.0
和react-i18next^7.0.0
to升级到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
通话application
顺序withTranslation
export default withTranslation(['application', 'about'])(AboutControl);
反之亦然(supported-browsers
未翻译):
在旧版本的react-i18next
nsMode 选项中可以使用该选项解决了该问题,但它不再起作用:
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
}
});
我在文档中没有找到与此相关的任何内容。这是那里的一个例子:
// load multiple namespaces
// the t function will be set to first namespace as default
withTranslation(['ns1', 'ns2', 'ns3'])(MyComponent);
看起来不需要任何额外的选项,否则我想知道如果不翻译组件的文本应该传递哪些命名空间。它是一个错误吗?或者是否存在任何解决方法?
从 9 到 10 的迁移指南并未突出显示对此行为的任何更改。