使用 react-i18next-with-context npm 包进行国际化教程-JavaScript中文网-JavaScript教程资源分享门户

随着全球化的趋势，更多的网站和应用程序需要提供多语言支持。在 React 程序中，我们可以使用 react-i18next 插件进行国际化。但是，当应用程序中存在多个组件，并且它们需要公用同一个语言资源时，react-i18next 的默认配置不能很好地支持此需求。为了解决这个问题，我们可以使用 react-i18next-with-context，这个 npm 包提供了在组件层级中传递语言资源的功能。

安装

使用 npm 安装：

npm install react-i18next-with-context

或者使用 yarn：

yarn add react-i18next-with-context

使用

首先引入必要的依赖：

import React from 'react';
import { withTranslation } from 'react-i18next';
import withContext from 'react-i18next-with-context';

接下来，我们需要创建一个包含所需语言资源的上下文对象：

const LanguageContext = React.createContext({
    lang: 'en-US',
    messages: {},
    setLang: () => {},
});

export default LanguageContext;

这里我们创建了一个 LanguageContext 对象，包含两个属性 lang 和 messages，和一个方法 setLang。其中，lang 是当前语言代码，messages 是当前语言对应的文本信息。默认的语言为 en-US。setLang 方法可以用于更改当前语言。

接下来，我们将语言资源对象传递到上下文对象中：

-- -------------------- ---- -------
------ -- ---- --------------------
------ -- ---- --------------------

----- --------- - -
    -------- ---
    -------- ---
--

-------------------------
    --------
        ----- --------
        --------- ----------
        -------- -- -- ---
    --
-

现在，我们可以创建组件了。我们使用 withContext 方法将包装好的 LanguageContext 上下文对象传递给组件。

-- -------------------- ---- -------
----- ----- ------- --------------- -
    -------- -
        ----- - - - - -----------
        ------ -------------- ---------------
    -
-

----- -------------------- - -------------------------
----- ---------------- - ------------
    ----------------
    -- ----- -------- -- -- --
        ---- -----
        ---------- ---------
    --
------------------------

这里我们创建了一个 Hello 组件，并使用 withTranslation 将组件翻译为多语言。然后使用 withContext 将上下文对象绑定到 HelloWithTranslation 组件上，并且将 lang 和 message 属性分别传递给组件。

现在，我们可以在应用程序中使用 HelloWithContext 组件了，并且能够自动获取所需的语言资源。

function App() {
    return <HelloWithContext />;
}

当我们需要更改应用程序的当前语言时，可以通过 setLang 方法进行修改。

-- -------------------- ---- -------
----- ---------------- ------- --------------- -
    -------- -
        ----- - ------- - - -------------
        ------ -
            -----
                ------- ----------- -- ----------------------------------
                ------- ----------- -- -----------------------------
            ------
        --
    -
-

---------------------------- - ----------------

这里我们创建了一个语言选择器组件，可以通过点击按钮来切换当前语言。

示例代码

完整的示例代码请参考以下链接：

react-i18next-with-context 示例代码

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66b14