介绍
deskbookers-react-intl-redux 是一个 React 库，用于实现国际化。该库使用了 React、Redux 和 react-intl 等技术，使得在 React 应用中使用国际化变得更加易于管理和扩展。
本文将介绍如何使用 deskbookers-react-intl-redux 实现国际化，并提供示例代码以供参考。
前置知识
在使用 deskbookers-react-intl-redux 之前，你需要对以下技术有一定的了解：
- React：一个由 Facebook 开发的用于构建用户界面的 JavaScript 库。
- Redux：一个用于 JavaScript 应用程序状态管理的 JavaScript 库。
- react-intl：一个由 FormatJS 团队开发的 React 组件，用于国际化和本地化。
如果你对以上技术都已掌握，那么接下来就可以学习如何使用 deskbookers-react-intl-redux。
安装
在使用 deskbookers-react-intl-redux 之前，你需要先安装它。
你可以使用 npm 或 yarn 安装它：
--- ------- ------ ---------------------------- - - ---- --- ----------------------------
使用
接下来我们将使用 deskbookers-react-intl-redux 来实现一个国际化的 React 应用。我们将实现一个简单的登录页面，并根据用户的语言偏好来显示不同的文本。
创建 Redux Store
我们需要在项目中创建一个 Redux Store。因为 deskbookers-react-intl-redux 的国际化数据是存储在 Redux Store 中的。在这个示例中，我们将使用 create-react-app 来创建一个示例项目，并在项目中创建一个名为 store.js 的文件：
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ - ---------- - ---- -------------------------------
----- ------------ - -
--------- ----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------
------ -
---------
--------- ---------------
--
--------
------ ------
-
--
----- ---------- - -
-------- ------ ------
-------------- -----
--------- -
--- -
------ -
------ --------
------- ---------
------ --------
--------- ----------
-
--
--- -
------ -
------ ------------
------- ------------
------ --------
--------- ---- -- ------
-
-
-
--
----- - -------- ------------ -------- --------- - - -----------------------
----- ----- - ------------
-----------------
---- --------
----- -----------
---
----------------------
--
------ ------- ------
------ - ------- -- ------------ --------- -- ------------- --此处我们创建了一个名为 store 的 Redux Store，其中包含了两个 reducer：app 和 intl。其中，app reducer 存储了当前语言，intl reducer 存储了所有的本地化字符串。
地区配置（intlConfig）包含了两个语言版本的翻译信息，包括英语和法语。你可以添加更多的语言和翻译信息以满足你的应用需求。
创建 React 组件
我们需要在 React 中创建一个组件，使用 deskbookers-react-intl-redux 来实现国际化。在这个示例中，我们将实现一个简单的登录页面，其中的文本将被翻译成用户选择的语言版本。
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------------- - ---- -------------------------------
------ - -------------- ----------- - ---- ----------
------ --------------
----- --------- - -- --------- --------- -------------- -- -- -
----- ------------ - ----- -- -
-----------------------
-- ----- ------
--
------ -
----- ------------------------
-------------------------------
-----
------ ----------------
----------------- ---------------- ---------------------- --
--------
------ ------------ ------------ -------- --
------
-----
------ -------------------
----------------- ------------------- ------------------------- --
--------
------ --------------- --------------- -------- --
------
------- --------------
----------------- ----------------- ----------------------- --
---------
-----
------- ----------- -- --------------------------------------
------- ----------- -- ---------------------------------------
------
-------
--
--
----- --------------- - ----- -- --
--------- --------------------------------------
--------- -------------------------------------
---
----- ------------------ - -------- -- --
--------------- -------- -- --------------------------------------------
---
------ ------- ------------------------ -------------------------------此组件中，我们使用了以下两个 React 组件：
- FormattedMessage：一个用于翻译特定本地化消息的 React 组件。
- connect：一个用于连接 Redux Store 和 React 组件的函数。
在上面的代码中，我们首先通过 connect 函数将语言和翻译信息与 Redux Store 连接起来，并在组件中使用这些信息来显示正确的本地化消息。
接下来，我们实现了一个 handleSubmit 函数，用于处理提交表单的逻辑。在 render 方法中，我们使用了 FormattedMessage 组件来显示本地化的文本。这个组件将根据用户的语言版本来显示正确的翻译信息。
最后，我们还在组件中实现了一个切换语言的代码。这个代码通过调用 changeLocale 函数来改变 Redux Store 中的语言代码，以便显示正确的翻译信息。
在应用中使用
现在我们已经准备好在应用中使用这个组件了。在这个示例中，我们将使用 React Router，然后将该组件嵌入到登录页路由中。在这里我们不讨论 React Router 的使用，而是专注于如何在页面中使用该组件。
------ ----- ---- --------
------ - ------- ------ ------ - ---- -------------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ ----- ---- ----------
----- --- - -- ------- -- -- -
--------- --------------
------- ------------------
--------
--- ---- ---
------ ------------- ----------------- --
---------
---------
-----------
--
------ ------- ----在这个示例中，我们将 Login 组件作为登录页路由的组件，并将其包含在 Provider 组件内，以便能够在组件中使用 Redux。
总结
在本文中，我们介绍了如何使用 deskbookers-react-intl-redux 库来实现 React 应用的国际化。我们使用了 React、Redux 和 react-intl 等技术来实现这一目标，并提供了示例代码以供参考。
如果你正在创建一个需要支持多语言的 React 应用，deskbookers-react-intl-redux 库是非常有用的工具，可以帮你快速、灵活地实现国际化的功能。祝你在使用中取得好的成果！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e381e8991b448d77ff