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