在前端开发中,到了国际化的阶段,多语言支持是必不可少的功能。随着 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 的命令:
--- ------- ------- ------
安装 react-i18next 的命令:
--- ------- ------------- ------
安装 redux-i18next 的命令:
--- ------- ------------- ------
配置
i18next
i18next 的基础配置需要在初始化时完成。下面是一个简单的初始化代码:
------ ---- ---- ---------- ------ - ---------------- - ---- ---------------- --------------------------------- ---- ----- ---------- - --- - ------------ - ------ ------ ------- - -- --- - ------------ - ------ -------- - - - ---
其中,lng 表示默认语言为英语,resources 表示所有支持的语言和对应的翻译。
React
在 React 中使用 i18next 需要用到一个高阶组件:
------ ----- ---- -------- ------ - --------------- - ---- ---------------- ----- ----------- ------- --------------- - -------- - ----- - - - - ----------- ------ ---------------------- - - ------ ------- -------------------------------
其中,withTranslation 是一个高阶组件,将 i18next 的 t 方法注入到组件的 props 中。
Redux
在 Redux 中使用 i18next 需要使用 redux-i18next 库。下面是一个简单的使用代码:
------ - ------------ --------------- - ---- -------- ------ - --------- - ---- ---------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ------------------ ---------- ----------- ---- ----------- --
其中,i18nState 是一个 reducer,它将 i18next 的当前语言状态存储在 Redux store 的 i18n 属性中。
切换语言
切换语言需要改变 i18next 的当前语言状态。下面是一个简单的例子:
------ ---- ---- ---------- --------------------------
示例代码
下面是一个使用 i18next + React + Redux 的多语言示例:
-- -------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------- - ---- -------------- ------ ---- ---- ---------- ------ - --------------- - ---- ---------------- ------ - ---------------- ----------- - ---- -------- ------ - ---------- ------------------------ - ---- ---------------- ------ --- ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ------------------ ---------- ----------- ---- ----------- -- ------------------------------ ------- ---------------- --------- -------------- ---------------- ------------ ---- -- ------------------ ------------ ------------------------------- --
-- ------ ------ ----- ---- -------- ------ - ------- - ---- -------------- ------ - --------------- - ---- ---------------- ------ ------------ ----- --- ------- --------------- - ------------------ - ------------- ------------------------- - ------------------------------------- - --------------------------- - --------------------------------------------------- - -------- - ----- - - - - ----------- ------ - ---- ---------------- ------- ----------------------- --- --------------------------------------- ------- ------------------------------------- ------- --------------------------- ------- ---------------------- --------- --------- ------ -- - - ----- --------------- - ----- -- -- ---- ----------------- --- ------ ------- -------------------------------------------------
-- ----------- ------ - --------------- - ---- -------- ------ - ----------- - ---- ---------------- ------ ------- ----------------- -------- ----------- ---
结论
i18next + React + Redux 的方案是一个非常成熟和流行的解决方案,可以很好地支持 React 应用的多语言实践。通过这篇文章的介绍和示例代码,读者可以学习到如何使用 i18next + React + Redux 实现一个多语言 React 应用。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671857f1ad1e889fe22a5b9a