我正在尝试在我的应用中添加翻译,但是我找不到使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 translation PROJECT.CREATE_PROJECT.DEFAULT_PJ_NAME
翻译看起来像这样
{
"PROJECT": {
"CREATE_PROJECT" : {
"DEFAULT_PJ_NAME" : "Default"
}
}
}
您处在良好的道路上,您只需要添加翻译以标记i18next的翻译,就可以了>
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;
将翻译添加到带有Hook的功能组件中
import React from 'react'; // the hook import { useTranslation } from 'react-i18next'; function MyComponent () { const { t, i18n } = useTranslation(); return <h1>{t('PROJECT.CREATE_PROJECT.DEFAULT_PJ_NAME')}</h1> }
您可以在i18next Quick start guide中查看不同的实现,这已经很好地解释了