介绍
@yeutech-lab/react-admin-intl 是一个 React 客户端国际化工具，用于在 React 后台管理应用程序中实现本地化。它基于 React、React-Intl 和 React-Router 等技术。它提供了一个简单而强大的方式来管理你的多语言（Localizations）翻译和追踪应用程序的语言。已经支持多种语言。
安装
在你的项目中通过 npm 安装：
npm install @yeutech-lab/react-admin-intl --save
使用
1. 使用 <IntlProvider> 组件包含你的组件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- --------------------------------
------ -------- ---- ------------------
------ ----- ---- ----------
----- ------ - -----
----- --- - -- -- -
------ -
------------- --------------- ----------------------------
------ --
---------------
--
--
------ ------- ----2. 导入 FormattedMessage 组件来使用翻译信息
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- - ---- --------------------------------
----- ----- - -- -- -
------ -
--
-----------------
--------------
--------------------- -------------------- --------
--
---
--
--
------ ------- ------3. 在外部 JSON 文件中定义你的翻译信息
{
"zh": {
"app.title": "React 多语言示例"
},
"en": {
"app.title": "React Internationalization Example"
}
}示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- ---------------- - ---- --------------------------------
------ -------- ---- ------------------
----- ------ - -----
----- ----- - -- -- -
------ -
--
----
-----------------
--------------
--------------------- -------------------- --------
--
-----
-----
-----------------
-----------------
------------------- --- -------- ---- ----------
--
--- --
--------
-----------------
------------
--------------------
--
---------
------------
--------
-----------------
-----------
-------------------
--
---------
------
---
--
--
----- --- - -- -- -
------ -
------------- --------------- ----------------------------
------ --
---------------
--
--
------ ------- ----结论
通过使用 @yeutech-lab/react-admin-intl 轻松地实现 React 后台管理应用程序的国际化。如果你想要保存多语言信息的外部 JSON 文件，并且想要快速使用这些翻译信息，那么这个工具是非常有用和有价值的。希望你喜欢这篇文章并且在你的项目中使用此工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1eed