react 国际化 react-i18next
<p>重点：</p><p>动态切换语言，<span style="color: rgba(255, 0, 0, 1)">不刷新页面</span>的情况下切换，无需redux（从官网文档找到）：<br><img src="https://img2020.cnblogs.com/blog/1211488/202006/1211488-20200629104436210-827569681.png" alt="" loading="lazy"></p>
<p> </p>
<p>选择插件 <strong>react-i18next，</strong></p>
<p><strong>先安装</strong>npm install i18next react-i18next --save <span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 0, 0, 1)"><br></span></p>
<p>然后引入依赖代码如下，</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:false;">import React from 'react';
import ReactDOM from 'react-dom';
import i18n from 'i18next';
import { useTranslation, initReactI18next } from 'react-i18next';<br>import langCN from './langCN.js'<br>import langEN from './langEN.js'</pre>
<pre class="brush:javascript;gutter:false;">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: langEN
},
zh: {
translation: langCN
}
},
lng: 'en',
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
});</pre>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:false;">function App() {
<span style="color: rgba(255, 0, 0, 1)">const { t } = useTranslation();</span>
<span style="color: rgba(255, 0, 0, 1)">React.translate = t;</span>
return (
<Provider store={store}>
<HashRouter>
<LocaleProvider locale={zhCN}>
<Main />
</LocaleProvider>
</HashRouter>
</Provider >
);
}
ReactDOM.render(
<App />
,
document.getElementById('app')
);
</pre>
</div>
<p> </p>
</div>
</div>
<p> <span style="color: rgba(255, 0, 0, 1)">注意：useTranslation()必须是函数组件中使用否则会报，hooks错误。</span></p>
<pre class="brush:javascript;gutter:false;"> React.translate = t; 将该方法放到全局函数中。</pre>
<div> </div>
<div><img src="https://img2020.cnblogs.com/blog/1211488/202006/1211488-20200601142406871-616538932.png" alt="">
<p> </p>
<p> <img src="https://img2020.cnblogs.com/blog/1211488/202006/1211488-20200601142417422-28156066.png" alt=""></p>
<p> </p>
<p> <div className={styles.savingText}><span style="color: rgba(255, 0, 0, 1)">{React.translate('year')}</span></div></p>
<p>使用全局定义的方法即可进行转换。</p>
<p> </p>
<p>目前为止，还没有用到 <em>i18next-xhr-backend</em> , 这个插件可以使你的 json 文件放到 public 目录下使用（下例 Locales JSON）。 </p>
<p>而 <em>i18next-browser-languagedetector</em> , 可以帮助你自动识别浏览器语言</p>
<pre>cnpm install i18next-xhr-backend i18next-browser-languagedetector --save<br><br></pre>
<p><strong><strong>方式二：</strong>请求后台数据</strong></p>
<p> <strong>Basic sample with XHR JSON:</strong></p>
<pre>cnpm install i18next-xhr-backend i18next-browser-languagedetector i18next-multiload-backend-adapter --save</pre>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:false;">i18n
.use(BackendAdapter)
// detect user language
.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,
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}}'
}
}
});
</pre>
</div>
<p> </p>
<p><br>转载自:https://www.cnblogs.com/jserhub/p/12651376.html</p>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/xiaoyaoweb/p/13025011.html
頁:
[1]