react项目实现国际化i18n
<p>本篇教程将从零开始实现一个支持多语言功能的demo</p><h2 id="0x00-准备">0x00 准备</h2>
<h3 id="1-通过create-react-app-新建项目">1. 通过create-react-app 新建项目</h3>
<pre><code class="language-shell">npx create-react-app my-app
</code></pre>
<h3 id="2-安装i18n所需的库">2. 安装i18n所需的库</h3>
<pre><code class="language-shell">npm install react-i18next i18next i18next-browser-languagedetector i18next-http-backend --save
</code></pre>
<p>其中，<code>i18next-browser-languagedetector</code>库用于添加语言切换功能，可支持自动检测环境，切换到正确的语言，也可以在url中指定语言</p>
<h3 id="3修改appjs">3.修改App.js</h3>
<p>实现一个用于展示的最小主页</p>
<pre><code class="language-javascript">import './App.css';
function App() {
const { t, i18n } = useTranslation();
return (
<div className="App">
<header className="App-header">
<p>
HelloWorld
</p>
</header>
</div>
);
}
export default App;
</code></pre>
<h2 id="0x01-实现最简多语言功能">0x01 实现最简多语言功能</h2>
<p>创建i18n.js,该文件在目录中与index.js同级。</p>
<pre><code class="language-javascript">import i18n from "i18next";
import { initReactI18next } from "react-i18next";
// the translations
// (tip move them in a JSON file and import them)
const resources = {
en: {
translation: {
"HelloWorld": "HelloWorld"
}
},
zh_CN: {
translation: {
"HelloWorld": "你好世界"
}
}
};
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources,
lng: "zh_CN", //设置当前语言
keySeparator: false, // we do not use keys in form messages.welcome
interpolation: {
escapeValue: false // react already safes from xss
}
});
export default i18n;
</code></pre>
<p>不同语言的翻译内容填写在resources中，按照以上格式填写。上边我们对HelloWorld提供了两种语言的翻译，并设置当前语言为中文(代码zh_CN)</p>
<p>然后在index.js导入i18n.js</p>
<pre><code class="language-javascript">import './i18n';
</code></pre>
<p>编辑app.js</p>
<pre><code class="language-javascript">import './App.css';
import { useTranslation } from 'react-i18next';
function App() {
const { t, i18n } = useTranslation();
return (
<div className="App">
<header className="App-header">
<p>
{t("HelloWorld")}
</p>
</header>
</div>
);
}
export default App;
</code></pre>
<p>如上所示，t("HelloWorld")实现了对HelloWorld字符串的翻译。<br>
运行项目</p>
<pre><code class="language-shell">npm start
</code></pre>
<p>我们会看到主页显示出了"你好世界"</p>
<p>当我们把i18n.js的lng字段改为"en",再次刷新页面，会发现主页显示变为了"HelloWorld"</p>
<h2 id="0x02-待更新">0x02 (待更新)</h2>
<h2 id="参考文档">参考文档</h2>
<p>react-i18next官方文档<br>
i18next 官方文档<br>
i18next-browser-languagedetector github项目主页<br>
i18next-http-backend github项目主页</p><br><br>
来源：https://www.cnblogs.com/Wade-/p/14303907.html
頁:
[1]