如果你正在开发基于 Inferno.js 和 MobX 的前端应用，那么 inferno-mobx-translatable 可能是一个非常有用的 NPM 包，它提供了一个用于国际化的组件和一个带有自动翻译的示例应用。本文将介绍如何使用 inferno-mobx-translatable 包。
简介
inferno-mobx-translatable 是一个基于 Inferno.js 和 MobX 的组件库，它可以帮助您轻松地将您的应用程序本地化为多种语言。这个库提供了一个 Translatable 组件，它可以自动根据当前语言环境（通过 MobX）获取已翻译的文本，并将其渲染到页面上。所有的翻译文本都在一个 JSON 文件中定义，为实现国际化提供了一个标准的方法。
快速开始
首先，我们需要安装这个包。使用 npm 命令，可以在终端中执行以下命令：
npm install --save inferno-mobx-translatable
然后，我们需要创建一个容器组件，在这个组件中存储一些需要在整个应用程序中使用的状态信息。例如，我们可以使用 MobX 来存储当前语言环境。下面是一个示例组件：
-- -------------------- ---- -------
------ - -------- - ---- ---------------
------ - ---------- - ---- -------
------ ------ - --------- - ---- --------
------ ----- -------- - ------------
-------------- -----
----------------- -
------------------ - -------
--
---
---------
------ ----- ------------ ------- --------- -
-------- -
------ --- ------------------- -----
-
-在这个组件中，我们使用 observable 函数创建了一个 template 以存储当前语言环境。我们还使用了包裹器组件以便进行更多设置。
接下来，我们需要创建一个 <translatable> 组件，用于渲染翻译文本。这个组件有一个属性，即可以指定要翻译的文本的键。
下面是示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ---------------
------ ------ - --------- - ---- --------
------ - -------- - ---- -----------------
------ - ------------ - ---- ----------------------------
---------
------ ----- ---------- ------- --------- -
-------- -
------ -
------------- ------------------ --------------------------- --
--
-
-
----- ------------ - -
--- -
------------ ------- --------
--
--在这个示例中，我们使用 translations 对象指定了当前语言环境的翻译文本。我们还通过 text 属性指定了要翻译的文本的键。这个键必须与翻译文件中的键匹配。
创建翻译文件
我们需要在根目录下创建一个名为 translations.json 的文件来定义需要翻译的文本。下面是一个示例文件：
{
"en": {
"hello_world": "Hello, world!"
},
"es": {
"hello_world": "¡Hola, mundo!"
}
}在这个示例中，我们定义了一个英语和西班牙语的翻译文本。我们可以添加更多的语言支持。请注意，翻译文件的名称必须与当前语言环境的值相同。
设置语言环境
我们可以使用 appState 来设置当前语言环境。例如，在组件的 componentDidMount 方法中，我们可以设置语言环境。
-- -------------------- ---- -------
------ - -------- - ---- -----------------
----- --- ------- --------- -
------------------- -
-------------------------
-
-------- -
------ -
-----
----------- --
------
--
-
-在这个示例中，我们将语言环境设置为“es”，并在应用程序中渲染 HelloWorld 组件。此时，你应该可以在页面上看到“¡Hola, mundo!”的翻译文本。
总结
使用 inferno-mobx-translatable 是一种快速而简便的多语言处理方法。它借助 MobX 来管理应用程序的状态信息，在每个组件中使用 Translatable 的 prop API 来筛选当前语言。通过使用 translations.json 文件，你可以轻松地添加更多语言支持。
更多的示例代码和文档可以在 https://github.com/gilamran/inferno-mobx-translatable上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057a8e81e8991b448eb566