reactjs - react + i18next : Why aren't my nested keys working?

Question

我正在将 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 翻译对象。我究竟做错了什么？我检查了文档和示例，没有发现任何错误。

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 指定此:))。