在前端开发中，到了国际化的阶段，多语言支持是必不可少的功能。随着 React 生态的日渐成熟，有很多方案来支持 React 应用的多语言实践。其中，i18next + React + Redux 的方案是一个非常成熟和流行的解决方案。
i18next 是什么
i18next 是一个开源的多语言核心库。它支持多种语言，包括阿拉伯语、中文、英语、法语、德语、荷兰语、意大利语、日语、韩语、葡萄牙语、俄语和西班牙语等。i18next 不仅支持浏览器端，也支持 Node.js 和 React Native。另外，i18next 提供了很多小插件，方便你对多语言进行自定义的配置和扩展。
React 和 Redux
React 是一个非常流行的前端框架，它是一个基于组件化的思想来构建用户界面的库。Redux 是一个用于 JavaScript 应用程序的可预测的状态容器，它可以让你的应用程序的状态变化变得更加可预测、可控。
i18next + React + Redux 的方案
i18next + React + Redux 的方案依赖于 React 和 Redux 两个库。其中，React 负责渲染视图，Redux 负责管理状态，i18next 则负责多语言的实现。
安装
下面是安装 i18next 的命令：
npm install i18next --save
安装 react-i18next 的命令：
npm install react-i18next --save
安装 redux-i18next 的命令：
npm install redux-i18next --save
配置
i18next
i18next 的基础配置需要在初始化时完成。下面是一个简单的初始化代码：
-- -------------------- ---- -------
------ ---- ---- ----------
------ - ---------------- - ---- ----------------
---------------------------------
---- -----
---------- -
--- -
------------ -
------ ------ -------
-
--
--- -
------------ -
------ --------
-
-
-
---其中，lng 表示默认语言为英语，resources 表示所有支持的语言和对应的翻译。
React
在 React 中使用 i18next 需要用到一个高阶组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- ----------------
----- ----------- ------- --------------- -
-------- -
----- - - - - -----------
------ ----------------------
-
-
------ ------- -------------------------------其中，withTranslation 是一个高阶组件，将 i18next 的 t 方法注入到组件的 props 中。
Redux
在 Redux 中使用 i18next 需要使用 redux-i18next 库。下面是一个简单的使用代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - --------- - ---- ---------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ------------------ ---------- ----------- ---- ----------- --
其中，i18nState 是一个 reducer，它将 i18next 的当前语言状态存储在 Redux store 的 i18n 属性中。
切换语言
切换语言需要改变 i18next 的当前语言状态。下面是一个简单的例子：
import i18n from "i18next";
i18n.changeLanguage("zh");示例代码
下面是一个使用 i18next + React + Redux 的多语言示例：
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ---- ---- ----------
------ - --------------- - ---- ----------------
------ - ---------------- ----------- - ---- --------
------ - ---------- ------------------------ - ---- ----------------
------ --- ---- --------
------ ----------- ---- -------------
----- ----- - ------------
------------
------------------ ---------- ----------- ----
-----------
--
------------------------------ -------
----------------
--------- --------------
---------------- ------------
---- --
------------------
------------
-------------------------------
---- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------------- - ---- ----------------
------ ------------
----- --- ------- --------------- -
------------------ -
-------------
------------------------- - -------------------------------------
-
--------------------------- -
---------------------------------------------------
-
-------- -
----- - - - - -----------
------ -
---- ----------------
------- -----------------------
--- ---------------------------------------
------- -------------------------------------
------- ---------------------------
------- ----------------------
---------
---------
------
--
-
-
----- --------------- - ----- -- --
---- -----------------
---
------ ------- -------------------------------------------------// reducers.js
import { combineReducers } from "redux";
import { i18nReducer } from "redux-i18next";
export default combineReducers({
i18next: i18nReducer
});结论
i18next + React + Redux 的方案是一个非常成熟和流行的解决方案，可以很好地支持 React 应用的多语言实践。通过这篇文章的介绍和示例代码，读者可以学习到如何使用 i18next + React + Redux 实现一个多语言 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671857f1ad1e889fe22a5b9a