本文使用 React-i18next 库结合 React， 介绍如何在 React 中配置使用国际化。
官方地址：i18next | react-i18next
react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用；
react-i18next 特点：
# npm npm install react-i18next i18next --save # 如果需要检测当前浏览器的语言或者从服务器获取配置资源可以安装下面依赖 npm install i18next-http-backend i18next-browser-languagedetector --save
npm install react-i18next i18next --save
2.新建文件 en.json 和 zh.json;
src\react-i18next\locales\en.json
{
title: "Hello Word"
}src\react-i18next\locales\zh.json
{
title: "你好 世界"
}3.新建 resources.js 和 i18n.js;
src\react-i18next\locales\resources.js
import ja from "./ja.json";
import en from "./en.json";
import zh from "./zh.json";
export const resources = {
"ja": {
translation: ja
},
"en": {
translation: en
},
"zh": {
translation: zh
}
}
src\react-i18next\i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { resources } from './locales/resources';
i18n
// 将 i18n 实例传递给 react-i18next
.use(initReactI18next)
// 初始化 i18next
// 所有配置选项: https://www.i18next.com/overview/configuration-options
.init({
resources,
fallbackLng: "zh",
lng: "zh",
debug: true,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
}
});
export default i18n;1.在程序入口引入 i118n;
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import "./react-i18next/i18n";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);2.在 Hooks 中使用国际化；
import { useTranslation } from "react-i18next";
function App() {
const { t } = useTranslation();
return (
<div className="App">
{t("title")}
</div>
);
}
export default App;3.在 class 组件中使用国际化；
import React from "react";
import { withTranslation } from "react-i18next";
class App extends React.Component {
render() {
const { t } = this.props;
return (<div className="App">
{t("title")}
</div>);
}
}
export default withTranslation()(App);1.安装依赖
npm install i18next-browser-languagedetector --save
2.配置使用插件
// src\react-i18next\i18n.js
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
import { resources } from './locales/resources';
i18n
// 检测用户语言
// 操作文档: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// 将 i18n 实例传递给 react-i18next
.use(initReactI18next)
// 初始化 i18next
// 所有配置选项: https://www.i18next.com/overview/configuration-options
.init({
resources,
fallbackLng: "en",
lng: navigator.language,
debug: true,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
}
});
export default i18n;上面代码，首先导入 LanguageDetector，其次 use(LanguageDetector), 使用插件，最终在 init 配置项里配置 lng: navigator.language, 至此切换浏览器语言国际化组件完成；
// class 组件
const { t, i18n } = this.props;
i18n.changeLanguage("en"); // 手动切换到英文
// Hooks 组件
const { t, i18n } = useTranslation();
i18n.changeLanguage("zh"); // 手动切换到中文i18next 是一款强大的国际化框架，react-i18next 是基于 i18next 适用于 React 的框架，另外 i18next 还和很多的前端框架可以结合，所以只需要学习一次，学习成本低；
本文介绍了 react-i18next 的基本用法，如果更特殊的需求，文章开头的官方地址可以找到答案；
