reactjs - react-i18next setup fails with react-redux component
问题描述
I have tried all the ways to onboard react-i18next , react-redux and typescript app.
Below is my index.js file:
import * as enTranslations from "./assets/locales/en";
import * as frTranslations from "./assets/locales/fr";
const resources = {
en: { messages: enTranslations }
};
i18next
.use(initReactI18next)
.init({
resources,
fallbackLng: "en",
debug: true,
// have a common namespace used around the full app
ns: ["translations"],
defaultNS: "translations",
namespaceSeparator: '.',
keySeparator: false, // we use content as keys
interpolation: {
escapeValue: false
},
lng: "en",
}).then(() => {
ReactDOM.render(
<I18nextProvider i18n={i18next}>
<Provider store={store}>
<CookiesProvider>
<App />
</CookiesProvider>
</Provider>
</I18nextProvider>,
document.getElementById('root')
)
});
My app.js code:
export default compose(withTranslation("translations"), connect(
mapStateToProps,
mapDispatchToProps
))(App);
My component render method and export code:
export default compose(
withTranslation('translations'),
connect(mapStateToProps, mapDispatchToProps)
)(UserComponent);
render method:
render() {
const { t } = this.props;
return (
<h1>{CLIENTS_HEADER_TITLE} {t('title')}</h1>
);
But i always see the key printed instead of key value. I didnt find any example using react-redux.
I am using "react-i18next": "^11.0.1" and i get missing key error.
解决方案
下面的代码更改使其现在可以工作。
我的 app.js 代码:
export default compose(withTranslation(), connect(
mapStateToProps,
mapDispatchToProps
))(App);
我的组件导出代码:
export default compose(
withTranslation(),
connect(mapStateToProps, mapDispatchToProps)
)(UserComponent);
将 init 移至文件 i18n.js:
import enTranslations from "./assets/locales/en";
const resources = {
en: {
translation: {
"title": "Welcome {{name}}"
}
}
};
i18n
.use(initReactI18next)
.init({
resources,
lng: "en",
keySeparator: "false",
debug: true,
interpolation: {
escapeValue: false
},
useDataAttrOptions: true
});
export default i18n;
调试控制台输出帮助我解决了问题。
//import enTranslations from '....'
{title: "Welcome {{name}}", intro: "To get started and save to reload."}
//import * as enTranslations from '....'
Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag):
"Module"}
default: {title: "Welcome {{name}}", intro: "To get started and save to
reload."}
Symbol(Symbol.toStringTag): "Module"
__esModule: true
推荐阅读
- c# - 如何在 linq 查询中将字符替换或添加到字符串列表中?
- node.js - PM2 集群模式。在一个进程上执行也会阻塞其他进程上的事件循环
- python - 如何使用python生成图像?
- c# - BufferBlock.ReceiveAsync(timeout) 挂起,但 BufferBlock.ReceiveAsync() 工作正常
- r - 挑战在 mutate_at 中替换软已弃用的 funs_()
- bash - 结合 >> output.log 和 2>&1 | 三通输出.log
- c - 由于文件 txt 分隔符逗号 C 而导致 fscanf 出现问题
- azure-active-directory - 我忘记了我的管理员密码。如何恢复或重置
- ansible - Ansible 库存,使 ansible_host 指向两个私有 IP 地址
- python - 由于错误 403,Pycharm 无法从 Pycharm 2018.1 更新到 2020.1