在前端开发中，多语言支持是一个常见的需求。npm 包 react-i18n-polyglot 提供了一种方便且灵活的方式来实现多语言支持。本文将详细介绍如何使用该 npm 包。
安装 react-i18n-polyglot
使用 npm 安装 react-i18n-polyglot：
npm install react-i18n-polyglot --save
初始化 Polyglot
在应用程序中初始化 Polyglot：
-- -------------------- ---- ------- ------ -------- ---- ---------------- ------ - -------------------- - ---- ----------------------- ----- -------- - --- ----------- ----------------- ------ -------- ------ -------- -------- --------- ---------- --- ----- ------------ - ------------------------------- ---------------- ------ --------------------------- --- ------------------------------- --
多语言翻译
可以使用 Polyglot 对需要翻译的文本进行翻译。其中一些常用方法如下：
t(key: string, variables?: Record<string, any>)
翻译指定的键值，并使用 variables 对字符串中的占位符进行替换。占位符使用 %{placeholder} 的形式，其中 placeholder 是变量名。
polyglot.t('hello'); // 'Hello'
polyglot.t('welcome', { name: 'Alice' }); // 'Welcome, Alice!'has(key: string)
检查指定的翻译键是否存在。
polyglot.has('hello'); // true
polyglot.has('goodbye'); // falseextend(phrases: Record<string, string>)
添加新的翻译键和短语。
polyglot.extend({
goodbye: 'Goodbye',
});
polyglot.t('goodbye'); // 'Goodbye'在 React 组件中使用
react-i18n-polyglot 提供了一个高阶组件用于将翻译器注入到 React 组件中。这允许 React 组件直接使用 Polyglot 进行翻译。
import { withTranslate } from 'react-i18n-polyglot';
const Hello = ({ translate }) => (
<div>{translate('hello')}</div>
);
export default withTranslate(Hello);示例代码
假设有一个多语言应用程序，有一个顶部菜单栏，其中的菜单项应该根据所选语言进行翻译。以下示例演示如何使用 react-i18n-polyglot 进行这种翻译。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ----------------
------ - -------------- -------------------- - ---- ----------------------
----- ---- - -- ---------- ---------------- -- -- -
----- ---------- ------------ - ---------------
----- ---------------- - ------- -- -
----- ----------- - -------------------
-------------------------
------------------------------
--
------ -
-----
------- ---------------- ----------------------------
------- ------------------------------------------
------- -----------------------------------------
------- ------------------------------------------
---------
----
----------------------------
-----------------------------
-------------------------------
-----
------
--
--
----- --- - ---------------- --------- -- -- -
----- -------- - --- -----------
-----------------
-------- ----------
------- -----------
-------- -----
----- ------------------
------ -------------------
-------- ---------------------
---
----- ------------ - -------------------------------
----- ---------- ------------ - ---------------
----- ---------------- - ------------- -- -
-------------------------
--
------ -
-----
----- --------------------- ----------------------------------- --
------------ --------- -----------------
------
--
---
-------------------- --- ---------------------------------在这个示例中，我们创建了一个多语言菜单，在菜单中，用户可以选择他们希望使用的语言。当用户更改语言时，应用程序通过 Polyglot 进行翻译。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005588481e8991b448d5c66