Question

我试图在我的应用程序中添加翻译，但是我找不到使i18next正常工作的方法。

这是i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import * as en from './i18n/en.json';
import * as jp from './i18n/jp.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en,
      jp
    },
    lng: "en",
    fallbackLng: "en",
    keySeparator: ".",
    debug: true,
    interpolation: {
      escapeValue: false
    }
});

export default i18n;

然后，将其导入索引文件的第二行。

日志为：

i18next：languageChanged en i18next.js：27

i18next：已初始化{调试：true，initImmediate：true，ns：Array（1），defaultNS：Array（1），fallbackLng：Array（1），…} projectSelector.tsx：16 I18n {观察者：{…} ，选项：{…}，服务：{…}，记录器：记录器，模块：{…}，...} i18next.js：27

i18next :: translator：missingKey zh_CN翻译PROJECT.CREATE_PROJECT.DEFAULT_PJ_NAME

翻译看起来像这样

{
  "PROJECT": {
    "CREATE_PROJECT" : {
      "DEFAULT_PJ_NAME" : "Default"
    }
  }
}

Answer 1

您的路途很好，您只需要添加翻译以标记i18next的翻译即可

<p>&amp;quot;others</p>

在带有Hook的功能组件中添加翻译

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import en_translate from './i18n/en.json';

import jp_transltate from './i18n/jp.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en:{
            translation: en_translate              
        },
      jp:{
            translation: jp_transltate              
        }
    },
    lng: "en",
    fallbackLng: "en",
    keySeparator: ".",
    debug: true,
    interpolation: {
      escapeValue: false
    }
});

export default i18n;

您可以在i18next Quick start guide中查看不同的实现方式，对此进行了很好的解释

i18next如何加载翻译？

1 个答案: