随着全球化的趋势，更多的网站和应用程序需要提供多语言支持。在 React 程序中，我们可以使用 react-i18next 插件进行国际化。但是，当应用程序中存在多个组件，并且它们需要公用同一个语言资源时，react-i18next 的默认配置不能很好地支持此需求。为了解决这个问题，我们可以使用 react-i18next-with-context，这个 npm 包提供了在组件层级中传递语言资源的功能。
安装
使用 npm 安装：
--- ------- --------------------------
或者使用 yarn：
---- --- --------------------------
使用
首先引入必要的依赖：
------ ----- ---- -------- ------ - --------------- - ---- ---------------- ------ ----------- ---- -----------------------------
接下来，我们需要创建一个包含所需语言资源的上下文对象：
----- --------------- - ---------------------
----- --------
--------- ---
-------- -- -- ---
---
------ ------- ----------------这里我们创建了一个 LanguageContext 对象，包含两个属性 lang 和 messages，和一个方法 setLang。其中，lang 是当前语言代码，messages 是当前语言对应的文本信息。默认的语言为 en-US。setLang 方法可以用于更改当前语言。
接下来，我们将语言资源对象传递到上下文对象中：
------ -- ---- --------------------
------ -- ---- --------------------
----- --------- - -
-------- ---
-------- ---
--
-------------------------
--------
----- --------
--------- ----------
-------- -- -- ---
--
-现在，我们可以创建组件了。我们使用 withContext 方法将包装好的 LanguageContext 上下文对象传递给组件。
----- ----- ------- --------------- -
-------- -
----- - - - - -----------
------ -------------- ---------------
-
-
----- -------------------- - -------------------------
----- ---------------- - ------------
----------------
-- ----- -------- -- -- --
---- -----
---------- ---------
--
------------------------这里我们创建了一个 Hello 组件，并使用 withTranslation 将组件翻译为多语言。然后使用 withContext 将上下文对象绑定到 HelloWithTranslation 组件上，并且将 lang 和 message 属性分别传递给组件。
现在，我们可以在应用程序中使用 HelloWithContext 组件了，并且能够自动获取所需的语言资源。
-------- ----- -
------ ----------------- ---
-当我们需要更改应用程序的当前语言时，可以通过 setLang 方法进行修改。
----- ---------------- ------- --------------- -
-------- -
----- - ------- - - -------------
------ -
-----
------- ----------- -- ----------------------------------
------- ----------- -- -----------------------------
------
--
-
-
---------------------------- - ----------------这里我们创建了一个语言选择器组件，可以通过点击按钮来切换当前语言。
示例代码
完整的示例代码请参考以下链接：
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5551ab1864dac66b14