本文介绍了如何使用 MobX-React-Intl 这个 NPM 包来实现在 React 应用中进行多语言国际化。
MobX-React-Intl 是什么？
MobX-React-Intl 是一个将 MobX 与 react-intl 结合起来的库。它可以帮助我们快速地在 React 应用中实现多语言国际化。
在使用 MobX-React-Intl 之前，我们需要掌握一些基本 React 和 MobX 的知识。
如何安装
在项目根目录下使用以下命令安装：
npm install --save mobx-react-intl
如何使用
在使用 MobX-React-Intl 之前，我们需要在项目中引入以下依赖：
import { injectIntl } from 'react-intl';
import { observer } from 'mobx-react';
import { IntlComponent, IntlStore } from 'mobx-react-intl';injectIntl 是用来绑定当前组件的 props，使其可以使用 intl 方法。
observer 是 MobX 提供的一个装饰器，它可以使组件与数据之间建立响应式关系，使数据一旦变化，组件就会自动重渲染。
IntlComponent 是一个 React 组件，它可以用来覆盖 injectIntl 自己的 componentWillReceiveProps 方法。
IntlStore 是一个包含了需要被翻译的信息和语言类型信息的 MobX Store。
我们可以先创建一个 MyComponent 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ---------- - ---- -------------
------ - -------- - ---- -------------
------ - ------------- - ---- ------------------
----- ----------- ------- --------- -
-------- -
----- - ---- - - -----------
------ -
-----
------------------------- --- -------------- --------
------------------------ --- ----------------- -------
------
--
-
-
------ ------- ----------------------------------在这个例子中，我们使用了 formatMessage 方法。这个方法接收一个 id 参数，它会在调用前翻译这个 id 所对应的翻译信息。
当然，我们需要提供翻译信息。为了给 MobX-React-Intl 提供翻译信息，我们需要创建一个文件夹并在其中创建多个 JSON 文件，例如：
-- -------------------- ---- ------- ------- --- ------------- --- ------- - --- ---------- - --- ----------- --- ---- - --- -------- - - --- ------- - - --- ------- - - --- ------- - --- ----------- - --- -------------- --- ------------ --- ---------
我们来看一下 JSON 文件怎么写：
{
"app": {
"greeting": "Hello, {name}!",
"description": "This is an introduction to MobX-React-Intl."
}
}注意到我们的翻译信息中使用了 {name} 这样的占位符，我们可以使用 values 参数为这个占位符提供值：
-- -------------------- ---- -------
-------- -
----- - ---- - - -----------
------ -
-----
------------------------- --- -------------- -- ------ --------------
------------------------ --- ----------------- -------
------
--
-现在，我们已经完成了 MobX-React-Intl 的基本使用。
小结
在本文中，我们介绍了如何使用 MobX-React-Intl 这个 NPM 包来实现在 React 应用中进行多语言国际化。我们先是安装了这个 NPM 包，然后讲解了它的使用方法，最后提供了一些提示和建议。希望这篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2fd2