我试图在我的 React 应用程序中翻译一些东西。这适用于 i18next 和 react-i18next。我使用 withNamespaces HOC 渲染翻译并使用 PoEdit 扫描它们。到现在为止还挺好。
但是,我面临两个问题。我还有一个包含我所有 UI 组件的库。更像是从语义用户界面本身扩展的所有样式。那里也有一些翻译适用,我也想在react-i18next
那里使用相同的翻译。虽然在故事书中进行测试看起来都不错,但是当我运行npm link
并将包链接到我的主应用程序时,我突然收到此错误:
caught TypeError: (0 , _reactI18next.withNamespaces) is not a function
我的第二个问题是如何扩展翻译?例如,我有这个库,它将字段 A 翻译为“你好吗?”。但是,在为客户运行项目时,我注意到客户想要对 lib 中的某些内容进行另一种翻译。那么有没有办法覆盖它?因为翻译当然是捆绑在一起的,并在组件内部加载。
下面是一些代码它的外观:
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);