i18react 是一个基于 React 的国际化框架，它提供了组件级别的国际化支持，可以方便地实现多语言切换。在本文中，我们将介绍如何使用 i18react 完成前端应用的国际化。
安装 i18react
安装 i18react 的方法非常简单，可以直接使用 npm 进行安装：
npm install i18react
初始化 i18react
在应用程序中，第一步是初始化 i18react。这可以通过创建一个 i18next 的实例来完成：
-- -------------------- ---- -------
------ ------- ---- ----------
--------------
-------------- - ------------ ----- --
---- -----
---------- -
--- -
------------ -
------ ------- ------ -------
-------- -- ------- -------- -- ----- --- ---------------
--
--
--
---在这个例子中，我们初始化了 i18next，并指定了初始语言为英语。我们还指定了一个资源对象，其中包含用于国际化的字符串。
翻译文本
要翻译文本，我们可以使用 React 组件与 i18next 的集成，这样我们可以在应用程序中轻松定义并使用翻译字符串。
在下面的示例中，我们创建了一个 App 组件，其中包括三个按钮，分别对应英语、中文和西班牙语。当用户点击一个按钮时，我们将调用 i18next 的 t 方法来显示相应的文本。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ----------------
-------- ----- -
----- - -- ---- - - -----------------
----- ----------- - ------ -- -
--------------------------
--
------ -
-----
------- ----------- -- -----------------------------------
------- ----------- -- ------------------------------
------- ----------- -- -----------------------------------
-------------- --------------
---------------- -- --------------
------
--
-在这个例子中，我们使用 react-i18next 库中的 useTranslation 钩子，这个钩子将返回一个 t 方法，它可以用来翻译字符串。我们还定义了一个 handleClick 函数，用于切换语言。
处理 Plurals 和变量
有时候，我们需要在文本中包含变量，或者处理 Plurals（复数）等应用场景。
在 i18next 中，我们可以使用变量和 Plurals 等特性。例如：
en: {
translation: {
'Hi {{name}}!': 'Hi {{name}}!',
'{{count}} items': '{{count}} item',
'{{count}} items_plural': '{{count}} items',
},
},在上述示例中，我们定义了三个翻译字符串。第一个字符串使用了一个变量 name，这个变量将在渲染时进行替换。第二个和第三个字符串分别用于 Plurals 的单数和复数形式。
我们可以在组件中按照如下方式使用它们：
return (
<div>
<div>{t('Hi {{name}}!', { name: 'Alice' })}</div>
<div>{t('{{count}} items', { count: 1 })}</div>
<div>{t('{{count}} items', { count: 2 })}</div>
</div>
);在使用时，我们向 t 方法传递了一个对象，它包含要替换的变量和其对应的值。对于 Plurals，我们可以传递一个 count 变量来选择单数或复数形式。
总结
国际化是一个极其重要的前端开发领域。使用 i18next，我们可以轻松地实现应用程序的多语言支持。本文中，我们介绍了如何安装和初始化 i18next，以及如何使用变量和 Plurals 等特性。通过在应用程序中使用 i18next，我们可以将我们的应用程序带到世界各地的用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568cc81e8991b448e48c5