前端国际化 , React 项目多语言：React-i18next 本地化数据 && 请求后台数据

小马哥要勤奋 發表於 2020-4-7 23:44:00

前端国际化, React 项目多语言：React-i18next 本地化数据 && 请求后台数据

关键词：前端，国际化，多语言，react，react-i18next，i18n, antd
 
GitHub Examples
 
参考资料：
<ul>
<li>react-i18next </li>
<li>react-i18next documentation</li>
<li>i18next documentation</li>
<li>i18next-xhr-backend</li>
<li>i18next-browser-languageDetector</li>
<li>i18next-multiload-backend-adapter</li>
</ul>
 
一、搭建 React 项目
<div class="cnblogs_code">
<pre>npx create-react-app demo</pre>
</div>
 
二、安装 react-i18next
<div class="cnblogs_code">
<pre>npm install i18next react-i18next --save</pre>
</div>
 
三、两种使用方式 (本地化数据、请求后台数据)
 
方式一：本地化数据
Basic sample:
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactDOM from 'react-dom';
import i18n from 'i18next';
import { useTranslation, initReactI18next } from 'react-i18next';

i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
// the translations
// (tip move them in a JSON file and import them)
 resources: {
 en: {
 translation: {
 'Welcome to React': 'Welcome to React and react-i18next'
 }
 },
 zh: {
 translation: {
 'Welcome to React': '欢迎使用 React 和 react-i18next'
 }
 }
},
lng: 'en',
fallbackLng: 'en',

interpolation: {
 escapeValue: false
}
});

function App() {
const { t } = useTranslation();

return <h2>{t('Welcome to React')}</h2>;
}

// append app to dom
ReactDOM.render(<App />, document.getElementById('root'));</pre>
</div>
 
Basic sample with JSON:
根据 resources 上面的注释，把 resources 部分提取到 json 文件中，然后 import 引入。
en.json:
<div class="cnblogs_code">
<pre>{
"translation": {
"Welcome to React": "Welcome to React and react-i18next"
}
}</pre>
</div>
zh.json:
<div class="cnblogs_code">
<pre>{
"translation": {
"Welcome to React": "欢迎使用 React 和 react-i18next"
}
}</pre>
</div>
注意：translation 是 react-i18next 默认的命名空间（暂时先记着这样写，后面可以自定义命名空间）
 引入 JSON 文件：( 引入路径要根据 json 文件所在 src 目录下的相对路径 )
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactDOM from 'react-dom';
import i18n from 'i18next';
import en from './en.json';
import zh from './zh.json';
import { useTranslation, initReactI18next } from 'react-i18next';

i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
// the translations
// (tip move them in a JSON file and import them)
 resources: {
 en,
 zh
},
lng: 'en',
fallbackLng: 'en',

interpolation: {
 escapeValue: false
}
});

function App() {
const { t } = useTranslation();

return <h2>{t('Welcome to React')}</h2>;
}

// append app to dom
ReactDOM.render(<App />, document.getElementById('root'));</pre>
</div>
 
目前为止，还没有用到 i18next-xhr-backend , 这个插件可以使你的 json 文件放到 public 目录下使用（下例 Locales JSON）。 
而 i18next-browser-languagedetector , 可以帮助你自动识别浏览器语言
 
Basic sample with Locales JSON: (推荐)
继续安装插件：
<div class="cnblogs_code">
<pre>npm install i18next-xhr-backend i18next-browser-languagedetector --save</pre>
</div>
在 public 目录下新建 locales 文件夹，继续新建对应语言的文件夹 (例如：en，zh)，然后创建 translation.json。
例：public/locales/en/translation.json：
<div class="cnblogs_code">
<pre>{
"Welcome to React": "Welcome to React and react-i18next"
}</pre>
</div>
修改 i18n 初始化：
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactDOM from 'react-dom';
import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { useTranslation, initReactI18next } from 'react-i18next';

i18n
// load translation using xhr -> see /public/locales
// learn more: https://github.com/i18next/i18next-xhr-backend
.use(Backend)
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
fallbackLng: 'en',
debug: true,

interpolation: {
 escapeValue: false, // not needed for react as it escapes by default
 },
});

function App() {
const { t } = useTranslation();

return <h2>{t('Welcome to React')}</h2>;
}

// append app to dom
ReactDOM.render(<App />, document.getElementById('root'));</pre>
</div>
 
方式二：请求后台数据
 Basic sample with XHR JSON:
 继续安装插件：
<div class="cnblogs_code">
<pre>npm install i18next-xhr-backend i18next-browser-languagedetector i18next-multiload-backend-adapter --save</pre>
</div>
 
使用实例：
<div class="cnblogs_code">
<pre>import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
import BackendAdapter from 'i18next-multiload-backend-adapter';
import LanguageDetector from 'i18next-browser-languagedetector';
import { useTranslation, initReactI18next } from 'react-i18next';

i18n
// learn more: https://github.com/i18next/i18next-multiload-backend-adapter
.use(BackendAdapter)
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
lng: navigator.language,
fallbackLng: 'en',
debug: true,
preload: navigator.languages,
interpolation: {
 escapeValue: false // not needed for react as it escapes by default
 },
backend: {
 backend: XHR,
 allowMultiLoading: true,
 // learn more: https://github.com/i18next/i18next-xhr-backend
 backendOption: {
 loadPath: function(lngs, namespaces) {
 console.log(lngs, namespaces);
 return 'https://my-json-server.typicode.com/TserHub/Json/qinwm?lng={{lng}}&ns={{ns}}';
 },
 addPath:
 'https://my-json-server.typicode.com/TserHub/Json/qinwm?lng={{lng}}&ns={{ns}}'
 }
}
});

function App() {
const { t } = useTranslation();

return <h2>{t('Welcome to React')}</h2>;
}

// loading component for suspense fallback
function Loader() {
return <div>Loading...</div>;
}

// append app to dom
ReactDOM.render(
<Suspense fallback={<Loader />}>
<App />
</Suspense>,
document.getElementById('root')
);</pre>
</div>
 
更多 i18n 的详细配置和使用方法，请自行去参考资料查找。
 
<div id="gtx-trans" style="position: absolute; left: 415px; top: -16px"> </div> 
来源：https://www.cnblogs.com/jserhub/p/12651376.html

頁: [1]

琼殿技术论坛's Archiver

前端国际化, React 项目多语言：React-i18next 本地化数据 && 请求后台数据