reactjs - React + i18next:为什么我的嵌套键不起作用?
问题描述
我正在为一个小型网站使用 ReactJS。我决定使用 i18next 进行国际化并且它可以工作 - 除非我使用嵌套引用作为翻译键。
在以下示例中,显示了 intro1 和 intro2 键,但未找到 welcome.headtitle(控制台中出现错误“missingKey”)。
应用程序.js:
...
<p><Trans i18nKey='intro1'/></p>
<p><Trans i18nKey='intro2'/></p>
<p><Trans i18nKey='welcome.headtitle'/></p>
...
翻译.json:
{
"welcome": {
"headtitle": ...
...
},
"intro1": ...,
"intro2": ...,
}
我知道 i18next 允许嵌套 JSON 翻译对象。我究竟做错了什么?我检查了文档和示例,没有发现任何错误。
解决方案
虽然使用“welcome.name”等的答案是有效的用法,但对于我的用例,我实际上需要使用结构化键,以便我可以更好地构建我的翻译。
使嵌套值对我有用的原因是keySeparator: false
从i18n.init
函数中删除了。
代码将是:
i18n.use(initReactI18next).init({
resources: {
en: {translation: EN},
fr: {translation: FR},
},
lng: 'en',
fallbackLng: 'en',
// keySeparator: false, // this was the line that I've had to remove to make it work
interpolation: {
escapeValue: false,
},
});
我的 JSON 看起来像:
{
"nested": {
"value": "Trying a nested value"
}
}
我的 HTML(我的反应组件中的 div):
<div>{t("nested.value")}</div>
推荐阅读
- javascript - React App 没有编译我的图像或视频
- javascript - 所有选项卡上的 Window.onUnload
- java - 将 0 或 1 移到一侧,移位次数较少
- macos - How to retrieve the XPC service of a file provider extension on macOS?
- google-maps - 位置更改时如何在简历上刷新谷歌地图标记?
- java - 如何创建低分跟踪器?
- cefsharp - 保存 CefSharp cookie 的最佳位置?
- python - Discord.py 向特定用户 ID 发送 DM
- javascript - 通过 CSS 将内容与侧面板居中
- c++ - 在CPP中转换char数组中的字符串