React + i18next: 为什么我的嵌套键无法正常工作？

Question

我正在为一个小型网站使用ReactJS。我决定使用i18next来实现国际化，它可以正常工作 - 除非我对翻译关键字使用嵌套引用。

在下面的例子中，intro1和intro2关键字被显示，但welcome.headtitle未被找到（在控制台中出现"missingKey"错误）。

App.js：

...
 <p><Trans i18nKey='intro1'/></p>
 <p><Trans i18nKey='intro2'/></p>
 <p><Trans i18nKey='welcome.headtitle'/></p>
...

翻译.json:

{
"welcome": {
    "headtitle": ...
    ...
  },
  "intro1": ...,
  "intro2": ...,
}

我知道i18next允许嵌套JSON翻译对象。我做错了什么？我已经检查了文档和示例，并没有注意到任何错误。

- Faire

---

你能发布一下你的i18n初始化代码吗？ - Pavel Ye

Answer 1

虽然使用 "welcome.name" 等答案是有效的用法，但对于我的用例，我实际上需要使用结构化键来更好地组织我的翻译。

让嵌套值对我起作用的原因是从 i18n.init 函数中删除了 keySeparator: false。

代码如下：

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
  // keySeparator: '.', // if you want to re-enable it (not "true", but actual separator value)
  interpolation: {
    escapeValue: false,
  },
});

我的JSON看起来像这样：

{
  "nested": {
    "value": "Trying a nested value"
  }
}

我的HTML（在我的React组件中的div）：

<div>{t("nested.value")}</div>

如果您想重新启用嵌套键，请不要使用 keySeparator: true。您需要像这样指定键分隔符号：keySeparator: '.'（感谢 @glinda93 指定 :) ）。

- Sanda

---

如果您想重新启用嵌套键，请不要使用keySeparator: true。您需要像这样指定键分隔符符号：keySeparator: '.'。 - glinda93

谢谢，这解决了问题。我认为这应该是一个独立的答案，而不是一个评论，这样用户可以更好地看到它。 - besim

非常感谢@glinda93。已按建议进行了更正 :)。 - Sanda