在前端开发中，国际化(i18n)是一个非常重要的问题。其中，React 组件库提供了 react-intl 这个工具来支持国际化的实现，而 react-intl-redux 则是一个方便的 react-intl 和 Redux 集成的库。
接下来，本文将介绍如何在 React 项目中引入 npm 包 @types/react-intl-redux，并进行简单使用。
安装
在项目中安装 @types/react-intl-redux：
npm install --save-dev @types/react-intl-redux
概述
react-intl-redux 提供了以下几个重要的组件：
IntlProvider：将语言包传递给 React 组件；ReduxIntlProvider：将语言包和 Redux state 传递给 React 组件；injectIntl：将intl对象注入到 React 组件的属性中，以便组件可以使用formatMessage等方法；connectIntl：返回一个使用 redux 中的 intl state 的高阶组件。
下面将使用这些组件来实现一个简单的国际化功能。
示例
1. 定义语言包
-- -------------------- ---- -------
-- ------------
------ ------- -
--- -
------- --------- ------- ---------
---- ------ ---- ------
--
--- -
------- --------- ---- ---------
---- ------ -------
--
--2. 配置 Redux
-- -------------------- ---- -------
-- ---------
------ - ------------ --------------- - ---- --------
------ - ------- -- ----------- - ---- -------------------
------ -------- ---- -------------
----- ------- - -----------------
----- ------------
---
----- ----- - -------------------- -
----- -
-------------- -----
------- -----
--------- ---------
--
--
------ ------- ------3. 在入口文件中注册Redux
-- -------------------- ---- -------
-- ---------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------- ------------- - ---- -------------
------ - ----------------- - ---- -------------------
------ -- ---- ----------------------------
------ -- ---- ----------------------------
------ ----- ---- ----------
------ -------- ---- -------------
------ -------- ---- -------------
-- ----------------
--------------------- --------
----------------
--------- --------------
------------- ----------- -----------------------
-------------------
--------- --
--------------------
---------------
------------
------------------------------
--4. 在组件中使用
-- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ - ----------- ----------------- - ---- -------------
--------- ------------- ------- ----------------- --
----- --------- ----------------------- - -- ---- -- -- -
----- ------------ - --- -------------------------------------- -- -
-------------------
----- ----- - --------- -- -----------------------------------
-- ------------- - -- -
----- ------ - ---------------
-----------------------
--------- -- --------------------------- - ---
-
--
------ -
----- ------------------------
------ ----------- ----------- --
----------------------------- --- ---- ----- ------------
-------
--
--
------ ------- ---------------------以上四个步骤将构建一个支持国际化的 React 项目。其中，通过 Provider 组件将 store 注入到 React 组件中， 其中存储了默认的语言地区、当前语言地区以及语言包。在 TaskForm.tsx 中，使用 injectIntl 方法将 formatMessage 函数注入到组件的属性中，从而进行国际化字符串的翻译。
总结
在 React 项目中，实现国际化功能可以通过 react-intl 和 react-intl-redux 这两个工具库的支持变得更加简单。通过本文的介绍，相信读者可以更好的掌握使用 @types/react-intl-redux 包的方法，突破国际化在 React 项目中的限制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc16db5cbfe1ea0611dc8