i18next外部翻译组件 [英] i18next translation outside component
问题描述
我是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();
我只是默认设置:找不到" ...
您正在使用后端服务在浏览器中异步获取翻译.导入i18n
时,您可能希望可以轻松获得翻译,但事实并非如此-i18n.init
也是一种异步方法(如果尝试等待它,则可以利用t
函数). /p>
一种可能的方法是定义翻译密钥:
const navigation = [
{
...
'title_key': 'analytics.title',
...
}
]
,然后将其传递到组件内的t
:
navigation.map(({ title_key }) => <li>t(title_key)</li>)
I'm new for i18next, trying to localize/translate website. Everything works for translation inside of component, but outside (means json files with i18n.t() it doesn't retrieve needed information, instead showing default value.
I'm using create-react-app and it's default settings for folders reference, maybe this is the key problem, but I can't find out why and what to change.
import i18n from '../../i18n';
const navigation = [
{
'id' : 'dashboard',
'title' : i18n.t('analytics.title', 'NOT FOUND'),
'type' : 'group',
'icon' : 'apps',
}
]
export default navigation;
And here is settings for i18n.js file:
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;
and for 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();
I'm just getting default : 'NOT FOUND'...
You are using a backend service to fetch translations asynchronously in the browser. When importing i18n
you probably expected translation to be readily available, but that's not the case - i18n.init
is also an async method (if you try and await it, you'll be able to leverage t
function).
One possible approach would be defining a translation key:
const navigation = [
{
...
'title_key': 'analytics.title',
...
}
]
And later passing it down to t
within a component:
navigation.map(({ title_key }) => <li>t(title_key)</li>)
这篇关于i18next外部翻译组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!