在前端开发过程中，i18n 是一个非常重要的内容。而 anu-localization 就是一个帮助我们在 React 项目中实现多语言国际化的 npm 包。
安装
要安装 anu-localization，只需要使用 npm 或者 yarn：
--- ------- ---------------- ------
---- --- ----------------
使用
初始化
首先，在我们的项目中，我们需要初始化 anu-localization：
------ ------------ ---- -------------------
-------------------
-------------- --------
------- ------------------------------------- -- --------
------------- -
-------- ------
-------- ------
-- ---
--
---------- -- -- --------------------------------------
---------- -------- -- ------------------------------------- --------
---在上面的代码中，我们通过调用 Localization.init 函数来初始化 anu-localization。其中，defaultLocale 表示我们项目默认的语言；locale 表示当前使用的语言。translations 是一个对象，每个属性名都是一个支持的语言编码，对应的属性值就是这个语言的翻译集合。
getLocale 和 setLocale 分别是用来获取和设置当前语言的函数。上面的代码中，我们将当前语言保存在了 localStorage 中。
翻译文本
在我们的 React 组件中，我们需要使用 Localization.getText 函数来获取翻译后的文本：
------ ------------ ---- ------------------- ----- ---- - ------------------------------------
在上面的代码中，hello-world 就是需要翻译的文本的 key。这个 key 对应的文本可以在 translations 对象中找到，如果当前语言不支持这个 key，函数会返回这个 key 本身。
切换语言
最后，我们需要提供一种切换语言的方法：
------ ------------ ---- ------------------- -------- -------------------- - ------------------------------- ------------------------- -
在上面的代码中，我们调用了 Localization.setLocale 来设置当前语言，然后调用了 window.location.reload 来刷新页面。
示例代码
------ ----- ---- --------
------ ------------ ---- -------------------
-------------------
-------------- --------
------- ------------------------------------- -- --------
------------- -
-------- -
-------------- ------- --------
--
-------- -
-------------- ---------
--
--
---------- -- -- --------------------------------------
---------- -------- -- ------------------------------------- --------
---
-------- ----- -
------ -
-----
----------------------------------------------
------- ----------- -- ---------------------------------------
------- ----------- -- ----------------------------------
------
--
-
-------- -------------------- -
-------------------------------
-------------------------
-
------ ------- ----在上面的代码中，我们创建了一个简单的 React 组件，其中包含一个显示文本和两个按钮，用于切换语言。这个组件的效果可以参考下面的截图：
总结
anu-localization 是一个非常简单但实用的 npm 包，可以帮助我们在 React 项目中快速实现多语言国际化。在使用过程中，我们需要首先初始化 anu-localization，然后在组件中使用 Localization.getText 函数获取翻译后的文本。最后，我们还需要提供一种切换语言的方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005668881e8991b448e2c37