json - i18next 翻译外部组件
问题描述
我是 i18next 的新手,正在尝试本地化/翻译网站。一切都适用于组件内部的翻译,但在外部(意味着带有 i18n.t() 的 json 文件它不会检索所需的信息,而是显示默认值。
我正在使用 create-react-app 它是文件夹引用的默认设置,也许这是关键问题,但我不知道为什么以及要更改什么。
import i18n from '../../i18n';
const navigation = [
{
'id' : 'dashboard',
'title' : i18n.t('analytics.title', 'NOT FOUND'),
'type' : 'group',
'icon' : 'apps',
}
]
export default navigation;
这是 i18n.js 文件的设置:
import i18n from "i18next";
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';
import detector from "i18next-browser-languagedetector";
i18n
.use(detector)
.use(Backend)
.use(initReactI18next)
.init({
lng: localStorage.getItem('language') || 'en',
backend: {
/* translation file path */
loadPath: '/assets/i18n/{{ns}}/{{lng}}.json'
},
fallbackLng: ['en', 'se', 'da'],
debug: true,
ns: ['translations'],
defaultNS: 'translations',
keySeparator: false,
interpolation: {
escapeValue: false,
formatSeparator: ','
},
react: {
wait: true
}
})
export default i18n;
对于 index.js:
import 'typeface-muli';
import './react-table-defaults';
import './react-chartjs-2-defaults';
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
import './styles/index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import App from 'app/App';
ReactDOM.render(
<I18nextProvider i18n={i18n}>
<App />
</ I18nextProvider>
,
document.getElementById('root'));
serviceWorker.unregister();
我只是得到默认值:'NOT FOUND'...
解决方案
您正在使用后端服务在浏览器中异步获取翻译。导入时i18n
,您可能希望翻译随时可用,但事实并非如此 -i18n.init
也是一种异步方法(如果您尝试等待它,您将能够利用t
函数)。
一种可能的方法是定义翻译键:
const navigation = [
{
...
'title_key': 'analytics.title',
...
}
]
然后将其传递到t
组件内:
navigation.map(({ title_key }) => <li>t(title_key)</li>)
推荐阅读
- html - VBA转html,带有动态元素属性的onclick事件函数
- angular - 将 Angular 应用程序部署在与根文件夹不同的文件夹中
- python - 创建一个可调用函数来为 django 模型中的属性生成一个值
- html - 覆盖内联css?
- c# - 并发异常 ASP MVC C#
- sql - 无法使用 WHERE 过滤(无法访问 ARRAY 类型的值的字段小时
#standardSQL SELECT DISTINCT geoNetwork.country FROM `bigquery-public-data.google_analytics_sample.ga_sessions_*` WHERE _TABLE_SUFFIX
- javascript - 如何正确添加 Google ReCaptcha
- java - Java比较对象的效率
- apache - Apache Directory Studio 未打开
- ios - 如何使用情节提要为导航栏中的视图设置宽度和高度约束?