在国际化的前端开发过程中，我们常常使用到翻译管理工具和框架，其中一个常见的工具就是 Translation Markup Language (TML)。在 React 项目中使用 TML，我们可以借助 npm 包 @mindbox/tml-js-react-typings。
概述
@mindbox/tml-js-react-typings 是一个 TypeScript 声明文件库，通过该库能够让 React 项目支持 TML 翻译标记语言。具体来说，使用 @mindbox/tml-js-react-typings 可以辅助我们在 React 组件中实现以下功能：
- 在组件中使用 TML 标记进行文本翻译；
- 支持多语言翻译；
- 提供接口进行定制化的翻译转换。
使用该库能够有效提高国际化开发效率，同时也使得代码规范性和可维护性得到提升。
安装
使用 npm 进行安装：
npm install --save @mindbox/tml-js-react-typings
然后在 React 项目中引入并初始化该库：
-- -------------------- ---- ------- ------ - ------------- - ---- -------------------------------- --------------- -- --- -- ------- --------------------- ------- -------------------- -- ------- --------- -------- ---
其中 initializeTml 中的 apiKey 和 source 对应 TML 的访问密钥和翻译源。language 是一个可选的参数，表示默认语言。如果我们需要支持多语言，还需要在组件中进行语言切换。
使用
下面通过一个示例来详细了解 @mindbox/tml-js-react-typings 在 React 中的使用。
引入依赖
在组件中引入 @mindbox/tml-js-react-typings：
import {
usingNamespace,
usingDefaultMessage,
TranslationParams,
} from '@mindbox/tml-js-react-typings';消息翻译
使用 usingNamespace 和 usingDefaultMessage 来实现 TML 消息翻译。
-- -------------------- ---- -------
----- ------- --------------------- - -- ---- -- -- -
----- ----- - -------------------------
----- ---- - ----------------------------
------ -
-----
----
----
-- -------------------
-----
----
-- ---------------------------------------------
-----
--- --------- ---
-----
------
--
--在上述代码中，我们通过 usingNamespace 函数在局部作用域内创建了一个名为 navbar 的 TML 命名空间。usingDefaultMessage 函数用于创建默认消息（fallback message，即如果被翻译的消息没有在当前语言中被定义，则使用默认消息）。
其中 label 函数和 home 常量是我们定义的组件中文本的翻译内容，link-${page} 相当于翻译消息的 key，这个 key 需要在翻译源中进行定义。最后在组件 jsx 中使用 {label(link-${page})} 把翻译内容嵌入进去。
参数化翻译
如果翻译消息中需要包含一些动态参数，我们可以使用 TranslationParams 来对翻译内容进行占位符替换。例如：
-- -------------------- ---- -------
----- ----- ------------------- - -- ----- -- -- -
----- ----- - -----------------------
----- --------- - ----------------------------------
----- ------- ----------------- - - ----- --
------ -
-----
----------------------------
--- ----------- ---
------
--
--在该示例中，我们使用 TranslationParams 对 page-title 翻译消息中的 ${title} 进行了参数化，实现了页面标题的动态翻译。
语言切换
要在组件中实现语言切换，需要使用到 @mindbox/tml-js-react-typings 提供的一些 API。以下代码演示了如何在 React 组件中实现语言切换：
-- -------------------- ---- -------
----- ---------------- - -- -- -
----- ----------------- ------------------- - ------------------
----- ---------------- - ------- ------------------------------------- -- -
----- -------- - -------------------
-----------------------------
-------------------------
--
------ -
-----
------- --------------------------- ------------------------
------- ------------------------------
------- -------------------------
--- -------- ---
---------
------
--
--在该示例中，我们在组件中使用一个 currentLanguage 状态和一个 onChangeLanguage 回调函数来更新当前语言。在回调函数中，我们通过 setTmlLanguage 函数来更新当前语言，从而实现了 TML 的语言切换。需要注意的是，在 initializeTml 阶段应该传入 setCurrentLanguage 函数，来保证 React 组件和 TML 语言状态的同步。
总结
通过本篇文章，我们了解了如何使用 @mindbox/tml-js-react-typings，实现 React 组件中的 i18n 功能。在示例代码中，我们演示了如何在组件中进行消息翻译、参数化翻译和语言切换等操作。使用该库能够有效提高项目的国际化开发效率，同时也使得代码规范性和可维护性得到提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005667f81e8991b448e2913