React + i18next：为什么我的嵌套键不起作用

JS

使用 React 和 i18next 进行国际化是一种常见的做法，它可以帮助我们轻松地将应用程序本地化为不同的语言。然而，有时候当我们尝试在嵌套键中使用翻译时，可能会遇到问题。本文将探讨为什么嵌套键在某些情况下不起作用，并提供一些解决方案。

在使用 i18next 进行国际化时，我们可以将翻译文本分组为键值对，这些键值对可以通过 JSON 文件或其他方式进行管理。通常情况下，我们可以通过简单的键来访问翻译文本，例如 t('hello')。然而，有时候我们可能希望在键中使用更复杂的结构，以便更好地组织翻译文本。

例如，我们想要在应用程序中显示一个包含标题和正文的通知。我们可以使用嵌套键来表示这种结构，例如：

JSon
{
  "notification": {
    "title": "这是通知的标题",
    "content": "这是通知的正文"
  }
}

然后，我们可以通过 t('notification.title') 和 t('notification.content') 来访问这些翻译文本。

然而，有时候我们可能会发现嵌套键不起作用，即无法正确获取到翻译文本。这可能是由于以下几个原因导致的：

1. 错误的 JSON 结构

首先，我们需要确保我们的 JSON 文件具有正确的结构。每个嵌套键都应该是一个对象，而不是一个字符串。例如，以下是一个正确的 JSON 结构：

JSon
{
  "notification": {
    "title": "这是通知的标题",
    "content": "这是通知的正文"
  }
}

如果我们的 JSON 结构不正确，i18next 可能无法正确解析嵌套键，导致无法获取到翻译文本。

2. 错误的 i18next 配置

除了 JSON 结构之外，我们还需要正确配置 i18next 来识别和解析嵌套键。在初始化 i18next 实例时，我们需要将 keySeparator 设置为 '.'，以指示嵌套键的分隔符。例如：

Javascript
i18next.init({
  keySeparator: '.',
  // 其他配置项...
});

如果我们没有正确配置 keySeparator，i18next 可能无法正确解析嵌套键，导致无法获取到翻译文本。

3. 错误的翻译函数调用

最后，我们需要确保在调用翻译函数时使用正确的键。如果我们在嵌套键中使用了错误的键，i18next 将无法找到对应的翻译文本。因此，我们需要确保在 t 函数中使用正确的键。例如：

Javascript
// 错误的调用方式
t('notification.title');
// 正确的调用方式
t('notification.title');

通过使用正确的键，我们可以确保 i18next 能够正确解析嵌套键，并返回正确的翻译文本。

案例代码

Javascript
// i18n.JS
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from "./locales/en/translation.JSon";
import translationZH from "./locales/zh/translation.JSon";
i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: translationEN
      },
      zh: {
        translation: translationZH
      }
    },
    lng: "en",
    fallbackLng: "en",
    keySeparator: ".",
    interpolation: {
      escapeValue: false
    }
  });
export default i18n;

JSon
// translation.JSon
{
  "notification": {
    "title": "这是通知的标题",
    "content": "这是通知的正文"
  }
}

JSx
// Notification.JS
import React from "react";
import { useTranslation } from "react-i18next";
const Notification = () => {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t("notification.title")}</h1>
      
{t("notification.content")}
    </div>
  );
};
export default Notification;

以上是一个简单的示例代码，演示了如何在 React 应用程序中使用 i18next 进行国际化。在这个示例中，我们使用了嵌套键来表示通知的标题和正文，并成功地获取到了翻译文本。

在使用 React 和 i18next 进行国际化时，嵌套键可以帮助我们更好地组织翻译文本。然而，当嵌套键不起作用时，我们需要检查 JSON 结构、i18next 配置和翻译函数调用等方面是否有错误。通过解决这些问题，我们可以成功地获取到嵌套键的翻译文本，并实现应用程序的国际化。