React项目中如何通过select下拉选项切换项目显示语言

直接用React生态最成熟的react-i18next实现即可，不需要手动写全局状态维护当前语言，自带用户选择缓存、浏览器默认语言检测能力，落地步骤如下：

• 安装依赖包

npm install i18next react-i18next i18next-browser-languagedetector

• 编写i18n初始化配置
  在src目录下新建i18n.js文件，写入基础配置：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

// 多语言文案映射，文案量大时可以拆成独立JSON文件维护
const resources = {
  en: {
    translation: {
      pageTitle: "My React App",
      langLabel: "Language"
      // 补全所有页面对应的英文文案
    }
  },
  zh: {
    translation: {
      pageTitle: "我的React应用",
      langLabel: "语言"
      // 补全所有页面对应的中文文案
    }
  }
};

i18n
  .use(LanguageDetector) // 自动检测浏览器默认语言、缓存用户手动选择的语言
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: "en", // 找不到对应翻译时默认回退到英文
    interpolation: {
      escapeValue: false // React自带XSS防护，不需要重复转义
    }
  });

export default i18n;

• 全局生效配置
  在项目入口文件（src/main.jsx/src/index.js）的最顶部引入配置文件，保证全项目组件都能拿到多语言能力：

import './i18n'

• 实现下拉语言切换组件

import { useTranslation } from 'react-i18next';

export default function LangSwitch() {
  const { i18n } = useTranslation();
  return (
    <select
      defaultValue={i18n.language}
      onChange={(e) => i18n.changeLanguage(e.target.value)}
    >
      <option value="en">English</option>
      <option value="zh">中文</option>
      {/* 需要新增其他语言直接追加option即可 */}
    </select>
  )
}

• 业务页面使用多语言文案
  所有需要跟随语言切换更新的文本，都用t()函数包裹即可：

import { useTranslation } from 'react-i18next';
import LangSwitch from './LangSwitch';

export default function Home() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('pageTitle')}</h1>
      <LangSwitch />
    </div>
  )
}

实现效果参考：

补充说明：

• 用户手动选择的语言会自动存储在localStorage中，下次访问会默认加载上次选择的语言，不需要额外写存储逻辑
• 项目文案量大时可以按页面拆分不同语言的JSON文件，做按需加载减少首屏体积
• 后续扩展其他语言，只需要在resources配置里加对应语言包、下拉组件追加对应选项即可，不需要修改业务代码

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