在前端开发中，使用 React 和 MobX 可以帮助我们更好地管理状态和组件之间的关系。而 react-mobx-choose 是一个优秀的 npm 包，提供了一种简单的方式来在 React 和 MobX 中实现国际化，并轻松切换不同语言的翻译。本文将详细介绍如何使用 react-mobx-choose。
前置条件
使用 react-mobx-choose 需要先了解以下内容：
安装 react-mobx-choose
在 React 项目中安装 react-mobx-choose 相对简单，可以使用 npm 或 yarn 进行安装：
npm install react-mobx-choose --save # 或者 yarn add react-mobx-choose
创建翻译文件
react-mobx-choose 支持多语言翻译，因此需要在项目中创建对应的翻译文件。在项目中新建一个 i18n 目录，用于存放不同语言的翻译文件。例如，创建一个 zh-CN.json 文件：
{
"GREETING": "你好，世界！",
"BUTTON_LABEL": "提交"
}使用 react-mobx-choose
初始化
在项目中的任意一个入口文件，例如 index.js 或 App.js，初始化 react-mobx-choose：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- - ---- --------------------
------ - ---------- - ---- -------
------ --- ---- --------
----- ------------ - ------------
-------- -----------------------------
-------- -----------------------------
---
----------------
--------------- ----------------------------
---- --
------------------
-------------------------------
--使用组件
在需要使用翻译的组件中，引入 choose 方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------
------ - ------ - ---- --------------------
---------
----- -------- ------- --------------- -
-------- -
------ -
-----
---------
--- ---------
--- ------- --------
-- ------------
------
--
-
-在组件中使用 choose 方法，传入一个对象，其中键是语言代码，值是对应的翻译文本。第二个参数是翻译文件中的键。更多用法可以参考官方文档。
切换语言
要切换语言只需要在 ChooseProvider 中使用 locale 属性即可：
<ChooseProvider translations={translations} locale={'en-US'}>
<App />
</ChooseProvider>或者在组件中使用 setLocale 方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------
------ - --------- - ---- --------------------
---------
----- ---------------- ------- --------------- -
-------- -
------ -
-----
------- ----------- -- -------------------------------
------- ----------- -- ------------------------------------
------
--
-
-示例代码
下面是一个完整的示例代码，可供参考：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - --------------- ------- --------- - ---- --------------------
------ - ---------- - ---- -------
------ - -------- - ---- -------------
----- ------------ - ------------
-------- -----------------------------
-------- -----------------------------
---
---------
----- -------- ------- --------------- -
-------- -
------ -
-----
---------
--- ---------
--- ------- --------
-- ------------
------
--
-
-
---------
----- ------ ------- --------------- -
------------- -
--------------
--- ----------
--- ---- ------- --- ---------
-- -----------------
-
-------- -
------ -
------- ----------- -- --------------------
---------
--- -----
--- ---------
-- ----------------
---------
--
-
-
---------
----- ---------------- ------- --------------- -
-------- -
------ -
-----
------- ----------- -- -------------------------------
------- ----------- -- ------------------------------------
------
--
-
-
----- --- ------- --------------- -
-------- -
------ -
-----
--------- --
------- --
----------------- --
------
--
-
-
----------------
--------------- ----------------------------
---- --
------------------
-------------------------------
--结论
react-mobx-choose 提供了一种简单的方式来在 React 和 MobX 中实现国际化，并轻松切换不同语言的翻译。通过本文所提供的教程，读者可以轻松上手并使用该 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672381e8991b448e39a2