npm 包 redux-locale 使用教程

阅读时长 8 分钟读完

前言

在前端开发中,本地化是一个非常重要的话题。为了解决多语言支持的问题,开发者常常需要使用到类似于 i18n 的库。而在 React 应用中,redux-locale 这个 npm 包提供了一种快速简单的解决方案。本文将对 redux-locale 的使用做一个详细的介绍。

安装

在项目中通过 npm 安装 redux-locale

使用

首先,我们需要在 Redux 中加入 redux-locale,并添加支持的语言:

-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
------ - ------------ - ---- ---------------

-- ------
----- ------- - ------ ------

-- ------
----- ----------- - -----------------
  ------- --------------
    --------
    -------------- -----
  ---
  -- ---
---

-- -- ----- -----
----- ----- - -------------------------

在组件中,我们可以通过 react-redux 提供的 connect 方法连接 Redux,以获取当前使用的语言和相关的语言选项:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------

----- -------- ------- --------------- -
  -------- -
    ----- - ------- ---------- --------- - - -----------

    ------ -
      -----
        -------------------------------------------------
        -------------------------------------------------

        ----
          --- ------ ---
          --------------------- -- -
            --- -----------
              ------- ----------- -- -----------------
                --------------------
              ---------
            -----
          ---
        -----
      ------
    --
  -
-

----- --------------- - ------- -- --
  ------- -------------
  ---------- ---------------------
---

----- ------------------ - ---------- -- --
  -- ------
  ---------- -------- -- -------------------------------
---

-- -- ------- ------ -----
------ ------- ------------------------ ------------------------------

在上面的代码中,我们通过 this.props.translate('GREETING_TITLE')this.props.translate('GREETING_MESSAGE') 来查找翻译好的文字。我们将会在下面讨论如何创建和管理翻译。

翻译文件的创建与管理

我们可以将所有语言相关的的翻译都放到一个文件夹中。例如:./public/locales 文件夹。

我们在这个文件夹中为每种语言都创建一个 .json 文件。该文件包含一个对象,其中每个属性都对应一个短语/文本中的一个独立的字符串:

-- -------------------- ---- -------
-- ------------------------
-
  ----------------- -------- -- --- ----------
  ------------------- ------- --- ------- --- -- --- ----- -- ---- --- ------
-

-- ------------------------
-
  ----------------- -------------
  ------------------- -----------------------
-

加载翻译

我们需要在应用程序中读取和加载这些文件。我们可以使用 redux-locale 提供的 loadTranslation 功能,将翻译存储在 Redux store 中。我们可以在 index.js 文件中添加下面的代码片段:

-- -------------------- ---- -------
-- ---
------ - --------------- - ---- ---------------

------------------- -- -
  ---------------------------
    ----------- -- -----------
    ------------ -- -
      --------------------------------- -------
    ---
---

完整代码

-- -------------------- ---- -------
-- ------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------ - ---- ---------------

----- -------- ------- --------- -
  -------- -
    ----- - ------- ---------- --------- - - -----------

    ------ -
      -----
        -------------------------------------------------
        -------------------------------------------------

        ----
          --------------------- -- -
            --- -----------
              ------- ----------- -- -----------------
                --------------------
              ---------
            -----
          ---
        -----
      ------
    --
  -
-

----- --------------- - ------- -- --
  ------- -------------
  ---------- ---------------------
---

----- ------------------ - ---------- -- --
  ---------- -------- -- -------------------------------
---

----- ------------------ - --------
  ----------------
  ------------------
------------

----- --- ------- --------------- -
  -------- -
    ------ -
      -----
        ------------------- --
      ------
    --
  -
-

------ ------- ----
-- -------------------- ---- -------
-- --------
------ - ---------------- ----------- - ---- --------
------ - ------------- --------------- - ---- ---------------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------

----- ------- - ------ ------

----- ----------- - -----------------
  ------- --------------
    --------
    -------------- -----
  ---
---

----- ----- - -------------------------

------------------- -- -
  ---------------------------
    ----------- -- -----------
    ------------ -- -
      --------------------------------- -------
    ---
---

----------------
  --------- --------------
    ---- --
  ------------
  -------------------------------
--

总结

在本文中,我们介绍了如何使用 redux-locale 包来实现应用程序的多语言支持。我们通过添加语言支持、加载翻译文件、在组件中使用翻译等步骤来完成多语言的实现。这些功能可以帮助我们更好地支持国际化产品,以便使我们的应用程序能够更容易地扩展到世界各地的用户。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a93

纠错
反馈