介绍
counterpart 是一个在 React 应用程序中进行本地化的 JavaScript 库。此库可以帮助我们简化 React 的本地化过程，将一些重复的工作自动化。使用 counterpart，开发者可以直接将字符串作为属性传递给组件，而无需在代码中编写大量的翻译词句。
本教程将为你提供一份让你了解如何使用 counterpart 库的详尽的指南。
安装 Counterpart
首先，你需要在你的项目中安装 counterpart.js。在命令行窗口中，输入以下的命令即可安装：
npm install counterpart --save-dev
Counterpart 的用法
在你的项目中引入 counterpart：
import counterpart from 'counterpart';
我们还需要安装相关的语言包。比如，我们需要安装英语包：
npm install counterpart-english --save-dev
要添加其他语言，只需要安装 counterpart-<lang> 包，然后在代码中对应地添加相应语言即可。
import counterpart from 'counterpart';
import English from 'counterpart-english';
// 添加英语
counterpart.registerTranslations('en', English);接下来，我们需要配置默认语言：
counterpart.setLocale('en');透过以上步骤， Counterpart 就已经正式安装完成了。 接下来，我们可以在任何要进行本地化处理的代码中使用 Counterpart。
Counterpart 的用法示例
本教程提供一个使用 React 的 Counterpart 的简单示例代码。 例如下例中的代码，我们可以简单地引入 Counterpart：
<div>{counterpart('user.my_profile')}</div>同时，还需要在给 realm 配置国际化时，只需要按照以下的方式添加模糊比较即可：
-- -------------------- ---- -------
----- ---- - -
---------- -------
--------- ------
------ -------------------
--
-- -- ---- --- ----------------- --- --------
----- --------- - -
------------------ --- ---------
--
----- --------------------- - --------------------
-- - ----------- --- ----------- ----------------
----- ----------- - --------------------------------------- ------------------------
-- - ----------- --------------- ----------- ------- --------- ----
----- -------------------- - ----------------------------- ---- -- -
------------- - ---------------
------ ---------
-- ----
-- --- ----------- ---
-------------------------------------- ----------------------使用计数器
在 React 的 Counterpart 中，我们还可以使用计数器（也就是进行复数处理）。 例如下面是一组完整的计数器使用代码示例，其中 products.left 可以根据数量多少自动会在 products 后加上相应的单、复数。
// 进行复数处理，例如 "1 product left" 和 "3 products left"
<div>{counterpart('products.left', { count: 3 })}</div>小结
Counterpart 是一个实用而强大的本地化 JavaScript 库。本指南已经介绍了如何安装 Counterpart，以及如何简单地在 React 代码中使用。如果您刚刚开始接触 Counterpart，我强烈建议您阅读官方文档获取更详细的信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80667