简介
React 是一款流行的 JavaScript 前端框架，而 i18n 则是国际化的缩写。react-i18n-hoc 就是一款让 React 应用国际化的第三方库。
react-i18n-hoc 不仅支持文本的国际化翻译，还支持 React 组件的国际化翻译，能够让 React 应用适配不同的语言和文化。通过它的使用，可以非常方便的实现语言切换、文本翻译和跨国度应用开发。
本篇文章主要介绍 react-i18n-hoc 的使用方法和实例代码，旨在帮助前端开发者更加方便的使用该第三方库。
安装
安装 react-i18n-hoc 很简单，只需要在命令行输入以下命令即可：
npm install react-i18n-hoc --save
安装完成后，即可在 React 应用中使用该库。
使用方法
初始化配置
在使用 react-i18n-hoc 之前，需要进行初始化配置。在 React 应用入口文件（一般是 index.js）中添加如下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---------- - ---- -----------------
-- -----
----- ------------ - -
-------- -
-------- --------
--
----- -
-------- ------- -------
-
--
-- --- --------------
------------
---------- --------- ------ -- -------
---------------- -------- -- ------
------------- ------------ -- -----
---
-- -- ----- --
----------------
---- ---
-------------------------------
--在以上代码中，首先定义了语言包：包含了 zh-cn 和 en 两种语言包数据（可根据自己的需要自定义）。然后通过 initialize 函数初始化了 react-i18n-hoc，并将 languages、defaultLanguage 和 languageData 分别设置为支持的语言种类、默认语言种类和语言包数据。
使用 i18n 文本
在 React 组件中，通过 i18n 函数可以访问对应的文本。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -----------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
---------------
------
--
-
-
------ ------- ------------------以上代码中，通过 i18n 函数获取语言包中对应的文本，并在组件中进行显示。需要注意的是，i18n 函数的参数应该是一个在语言包中存在的键值（这里是 hello），否则将返回原值。
使用 i18n 组件
除了文本的国际化翻译外，react-i18n-hoc 还支持 React 组件的国际化翻译，可以直接把 i18n 函数作为高阶组件包裹在需要国际化的组件上。
例如，假设一个组件 MyButton 需要进行国际化，那么可以这样定义：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -----------------
----- -------- ------- --------------- -
-------- -
------ -
----------------------------------
--
-
-
------ ------- ---------------以上代码中，将 MyButton 组件使用 i18n 函数进行包裹，就可以实现该组件的国际化翻译。
在使用时，可以像下面这样进行调用：
-- -------------------- ---- -------
------ -------- ---- -------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
--------- -------------- --
------
--
-
-
------ ------- ------------------在上述代码中，MyComponent 和 MyButton 都被包裹了 i18n 高阶组件，因此可以自动根据语言包进行相应的翻译。
切换语言
react-i18n-hoc 支持切换语言，可以通过 setLanguage 函数来实现。例如，在一个按钮的点击事件中，可以设置语言为已经定义好的语言包名称：
import { setLanguage } from 'react-i18n-hoc';
handleClick() {
setLanguage('en');
}在以上代码中，点击按钮后，即可将语言切换为英语。
总结
使用 react-i18n-hoc 可以方便的实现 React 应用的国际化翻译功能，从而让应用更加适配多语言和文化环境。
本文详细介绍了 react-i18n-hoc 的使用方法和示例代码，希望能够帮助前端开发者更加方便的使用该第三方库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671b81e8991b448e374a