React 多语言实践之 i18next + React + Redux

在前端开发中,到了国际化的阶段,多语言支持是必不可少的功能。随着 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