如何基于i18next根据语言选择渲染React不同组件？

问题描述 #

我正在使用React开发应用，采用i18next（通过gatsby-plugin-react-i18next）实现国际化功能。目前已通过useTranslation钩子完成全站字符串的多语言切换且运行正常，现需要根据用户选择的语言切换渲染不同组件（如示例中的Banner容器），请问能否通过该国际化框架实现此需求？

示例代码：

import React from "react"
import { useTranslation } from "gatsby-plugin-react-i18next";
import Layout from "../components/layout"

const IndexPage = () => {
  const { t } = useTranslation("home");

  return (
    <Layout>
     {eng ? (
       <div className="EngDiv">
            <p className="regularP">{t("areyouinterested")}</p>
       </div>       
     ):(<div className="EspDiv">
            <p className="regularP">{t("areyouinterested")}</p>
       </div>     
      )}
    </Layout>
  )
}

export default IndexPage

回答 #

完全可以通过i18next实现这个需求，核心是利用useTranslation钩子返回的i18n对象获取当前激活的语言，以此作为组件切换的判断依据。

具体实现步骤 #

1. 从useTranslation中解构i18n对象
   useTranslation不仅返回用于翻译的t函数，还会返回包含当前语言信息的i18n实例，其中i18n.language就是当前用户选择的语言（比如"en"、"es"）。

2. 根据当前语言判断渲染组件
   用i18n.language替代你示例中的eng变量，直接判断并渲染对应组件。修改后的代码如下：

import React from "react"
import { useTranslation } from "gatsby-plugin-react-i18next";
import Layout from "../components/layout"

const IndexPage = () => {
  const { t, i18n } = useTranslation("home");
  const currentLang = i18n.language;

  return (
    <Layout>
     {currentLang === "en" ? (
       <div className="EngDiv">
            <p className="regularP">{t("areyouinterested")}</p>
       </div>       
     ) : (
       <div className="EspDiv">
            <p className="regularP">{t("areyouinterested")}</p>
       </div>     
      )}
    </Layout>
  )
}

export default IndexPage

3. 多语言场景的优化方案
   如果需要支持3种及以上语言，推荐用对象映射替代if-else，让代码更易维护：

import React from "react"
import { useTranslation } from "gatsby-plugin-react-i18next";
import Layout from "../components/layout"
// 假设你已经定义了对应语言的组件
import EngBanner from "../components/EngBanner"
import EspBanner from "../components/EspBanner"
import FrBanner from "../components/FrBanner"

const IndexPage = () => {
  const { t, i18n } = useTranslation("home");
  const currentLang = i18n.language;

  // 建立语言与组件的映射关系
  const langComponentMap = {
    en: <EngBanner text={t("areyouinterested")} />,
    es: <EspBanner text={t("areyouinterested")} />,
    fr: <FrBanner text={t("areyouinterested")} />
  };

  // 渲染对应组件，默认回退到英文组件
  return (
    <Layout>
      {langComponentMap[currentLang] || langComponentMap["en"]}
    </Layout>
  )
}

export default IndexPage

额外说明 #

• 当用户切换语言时，i18n.language会自动更新，依赖该值的组件会自动重渲染，无需手动监听语言变化事件。
• 确保你的i18next配置中已经正确注册了所有需要支持的语言，否则i18n.language会使用默认语言。

内容的提问来源于stack exchange，提问作者emanueljuarez