在 Web 前端开发中，多语言国际化的需求一直以来都是必不可少的。而在 React 开发中，想要实现多语言的支持，则需要用到 react-i18n-interpolation 这款 npm 包。本文将详细介绍 react-i18n-interpolation 的使用方法，包括基本概念、API 接口和实际应用。
什么是 react-i18n-interpolation？
react-i18n-interpolation 是一个 React.js 应用程序的国际化工具，它可以让你在控制台中简单地管理多种语言的字符串。
react-i18n-interpolation 主要特点：
- 支持多种语言
- 可以在控制台中直接修改多语言字符串
- 支持 react-hooks
安装与使用
Step 1： 先安装 react-i18n-interpolation npm 包
npm i react-i18n-interpolation
Step 2： 在项目入口文件（一般是 app.js 等）引入 react-i18n-interpolation 库和新建 i18n 对象
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---- - ---- ---------------------------
----- ---- - --- ------
---------- --------- ---------
---------------- --------
------------- -
-------- -
---------- ---------
--
-------- -
---------- ------- --------
--
--
---其中，languages 是支持的语言类型数组，defaultLanguage 是默认语言类型，translations 是多语言字符串数组。
Step 3： 在你希望多语言的地方使用 i18n.t 函数
const Greetings = () => {
return <div>{i18n.t("greetings")}</div>;
};至此，一个简单的多语言 React 应用已经完成。
简单的使用示例
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---- - ---- ---------------------------
----- ---- - --- ------
---------- --------- ---------
---------------- --------
------------- -
-------- -
---------- ---------
--
-------- -
---------- ------- --------
--
--
---
----- --------- - -- -- -
------ ---------------------------------
--
-------------------------- --- ---------------------------------高级使用
- 在控制台中直接管理字符串
你可以在控制台中直接修改 translations 数组，修改后即可实时预览效果。具体使用可以查看 react-i18n-interpolation 的 GitHub 仓库。
- 支持 react-hooks
react-i18n-interpolation 还支持 react-hooks，你可以使用 useState 和 useEffect 等 hooks 来管理多语言。示例如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ------------
------ - ------------- ------- - ---- ---------------------------
----- ---- - --- ------
---------- --------- ---------
---------------- --------
------------- -
-------- -
---------- ---------
--
-------- -
---------- ------- --------
--
--
---
----- --------- - -- -- -
----- - ------------- - - - ----------
----- ----------------- ------------------- - ------------------
------ -
-----
-------
-----------------------
------------- -- -----------------------------------
-
------------------------ -- -
------- ---------- -------------
------
---------
---
---------
---------------------------
------
--
--
----- --- - -- -- -
------ -
------------- ------------
---------- --
---------------
--
--
-------------------- --- ---------------------------------结束语
基于 react-i18n-interpolation，我们可以轻松地实现多语言的 React.js 应用程序。我们可以通过这个工具在控制台中简单地管理多种语言的字符串，也可以支持 react-hooks 来管理多语言。当然，这只是 react-i18n-interpolation 的一部分功能，如果您还有更好的使用方式，欢迎分享给我们哦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671981e8991b448e36ec
