i18next/react：Trans 在元素中显示“未定义”

Question

我正在了解 i18next，但是当我尝试使用链接时，

Trans

给我带来了谜语。到目前为止，t{} 一切都运行良好（我正在 React – JSX 中工作）：

这是几乎可以工作的代码（我尝试过的其他方法根本不起作用）：

<p className="button"><Trans i18nkey="home.p3" components={{ MyLink: <a href='beispiele.html'>link</a> }}/>{t('home.p3')}</p>

JSON： 德：

{
 (…)
    "home": {
       (…)
        "p3": "Durchstöbern Sie unsere <5>Beispiele</5>.",
     (…)

    }
}

zh:

{
    (…)
    "home": {
        (…)
        "p3": "View <MyLink>samples</MyLink> of our work.",
       (…)
    }
}

这就是我初始化 i18next 的方式：

i18next
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
.init({
  debug: true,
  fallbackLng: 'de',                              // language to use
  resources: {
      en: {
          translation: common_en               // 'translation' is our custom namespace
      },
      de: {
          translation: common_de
      },
  },
});

显示的结果文本：未定义查看我们工作的示例。

我查看了有关使用

Trans

的 i18next 文档，也尝试使用 <1> 和类似的方法来封装链接。每次都显示“未定义”。我已经完成了本教程，它起作用了。并已尽可能密切地反映它。虽然没有错误消息，但

Trans

元素未被抓住。

如果有任何关于如何进一步解决此问题的提示，我将不胜感激。非常感谢！

---

预计到达时间： 感谢艾哈迈德的敏锐洞察力，我们发现了一个错误。我不会在上面纠正它，以防其他人遇到这个问题：它应该是

i18nKey

。

进一步挖掘表明我必须将 JSON 文件放入公共文件夹中才能使链接正常工作。对于那些对此感兴趣的人：在设置中的 init (i18n.use(Backend)) 中使用

i18next-http-backend

以便可以访问该文件夹

Answer 1

您的

Trans

组件中有一个拼写错误。您需要将

i18nkey

属性更改为

i18nKey

。

您可以查看 this StackBlitz 以获取实时工作示例。