【笔记】React 国际化
<h1 id="react-国际化">React 国际化</h1><h2 id="前言">前言</h2>
<p>仅管市面上存在多款流行的<strong>国际化</strong>解决方案，但是笔者个人精力有限在此只记录工作学习中遇到的解决方案（持续更新）</p>
<h2 id="react-i18next-方案"><code>react-i18next</code> 方案</h2>
<h3 id="1-安装">1. 安装</h3>
<pre><code class="language-sh">pnpm install react-i18next i18next --save
</code></pre>
<h3 id="2-创建文件">2. 创建文件</h3>
<p>在 <code>src</code> 目录下新建 <code>locales</code> ，并创建 <code>en-US.json</code> 、<code>zh-CN.json</code> 和 <code>resources.js</code></p>
<blockquote>
<p>en-US.json</p>
</blockquote>
<pre><code class="language-json">{
"hello":"Hello"
}
</code></pre>
<blockquote>
<p>zh-CN.json</p>
</blockquote>
<pre><code class="language-json">{
"hello":"你好"
}
</code></pre>
<blockquote>
<p>resources.js</p>
</blockquote>
<pre><code class="language-js">import enUS from './en_US.json';
import zh from './zh_CN.json';
const resources = {
'en-US': {
translation: enUS,
},
'zh-CN': {
translation: zh,
},
zh: {
translation: zh,
},
};
export default resources;
</code></pre>
<p>在 <code>src</code> 下新建 <code>i18n.ts</code></p>
<blockquote>
<p>i18n.ts</p>
</blockquote>
<pre><code class="language-typescript">import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import resources from '@/locales/resources.js';
// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
let localLang = sessionStorage.getItem('lang');
const browserLang = navigator.language;
if (!localLang) {
localLang = browserLang === 'zh-CN' ? 'zh-CN' : 'en-US';
}
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources,
lng: localLang, // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
// you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
// if you're using a language detector, do not define the lng option
interpolation: {
escapeValue: false, // react already safes from xss
},
});
export default i18n;
</code></pre>
<h3 id="3-导入">3. 导入</h3>
<p>在<code>main.ts/index.ts</code>中全局导入 <code>i18n.ts</code></p>
<blockquote>
<p>main.ts & index.ts</p>
</blockquote>
<pre><code class="language-tsx">import './index.less';
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
import './i18n'// 新增：导入i18n
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);
</code></pre>
<h3 id="4-使用">4. 使用</h3>
<p>在要使用国际化的页面使用<code>useTranslation</code> hook</p>
<blockquote>
<p>Layout.tsx</p>
</blockquote>
<pre><code class="language-tsx">import React from 'react';
// 顶部导入 useTranslation
import { useTranslation } from 'react-i18next';
const Layout: FC<any> = (props: PropsWithChildren<any>) => {
// 组件内部使用hook
const = useTranslation();
// 在事件方法中使用i18n.changeLanguage()方法
const toggleI18n = () => {
const locale = i18n.language === "zh-CN" ? "en-US" : "zh-CN";
i18n.changeLanguage(locale)
}
return (
<div>
<button onClick={toggleI18n}> i18n切换 </button>
</div>
);
};
export default Layout;
</code></pre>
<h3 id="5-追加字典到现有语言项">5. 追加字典到现有语言项</h3>
<p>如果依赖的第三方库已经绑定过选项字典，可以通过如下方法添加自己的字典到现有的<strong>语言项</strong>中</p>
<blockquote>
<p>创建字典的步骤和上述一致，但是在 main.ts 或者 index.ts 中的编写方式有所不同</p>
</blockquote>
<pre><code class="language-typescript">// main.ts & index.ts
import { resources } from "@/locales/resources"
import { useTranslation } from "react-i18next"
// 省略其他代码...
const { i18n } = useTranslation();
Object.keys(resources).forEach((lan: string) => {
i18n.addResourceBundle(lang, 'translation', localResources, true, false);
})
</code></pre><br><br>
来源：https://www.cnblogs.com/lovecola/p/18780024
頁:
[1]