如何使用useState实现网站多语言切换显示功能

1. 点击

元素修改菜单语言的实现 #

你现有代码的问题是：① 渲染文案时硬编码了languages.en，没有用到声明的text状态；② handleLanguage固定写死了切换为葡萄牙语，无法适配多语言切换需求。
修改逻辑：

• 给每个语言对应的点击元素绑定事件，将对应语言标识作为参数传入切换函数
• 渲染文案时动态取languages[当前语言状态]的对应字段
  示例修改后的RightNav组件核心代码：

const RightNav = ({ open }) => {
  const [currentLang, setCurrentLang] = useState("en");

  // 接收语言标识参数，更新状态
  const handleLanguage = (lang) => {
    setCurrentLang(lang);
  };

  return (
    <>
      <Ul open={open}>
        {/* 动态取当前语言对应的文案 */}
        <li>{languages[currentLang].about}</li>
        <li>{languages[currentLang].project}</li>
        <li>{languages[currentLang].contact}</li>
        <li className="image" onClick={() => handleLanguage('en')}>
          <img src={English} alt="EN" />
        </li>
        <li className="image" onClick={() => handleLanguage('jp')}>
          <img src={Japanese} alt="JP" />
        </li>
        <li className="image" onClick={() => handleLanguage('ru')}>
          <img src={Russian} alt="RU" />
        </li>
        <li className="image" onClick={() => handleLanguage('ptbr')}>
          <img src={Portuguese} alt="PT-BR" />
        </li>
      </Ul>
    </>
  );
};

2. 整站同步切换语言的最优方案 #

局部组件的useState只能在当前组件生效，要实现全局语言同步，按项目规模可选两种方案：

方案1：React Context API（无额外依赖，适合中小项目） #

这是最推荐的轻量方案，不需要引入第三方库：

1. 创建全局语言Context，封装状态和切换方法

// src/contexts/LanguageContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const languages = {
  en: {
    about: "about",
    project: "project",
    contact: "contact",
    slogan: "Think the Design, and I design the Code.",
    button: "Learn more",
  },
  ptbr: {
    about: "sobre",
    project: "projetos",
    contact: "contatos",
    slogan: "Think the Design, and I design the Code.",
    button: "Learn more",
  },
  jp: {
    about: "nihon",
    project: "nihon",
    contact: "nihon",
    slogan: "nihon",
    button: "nihon",
  },
  ru: {
    about: "руский",
    project: "руский",
    contact: "руский",
    slogan: "руский",
    button: "руский",
  },
};

const LanguageContext = createContext();

// 把Provider包裹在App根组件外
export const LanguageProvider = ({ children }) => {
  // 从本地存储读取用户上次选择的语言，默认英文
  const [currentLang, setCurrentLang] = useState(() => localStorage.getItem('lang') || 'en');

  const changeLang = (lang) => {
    setCurrentLang(lang);
    localStorage.setItem('lang', lang); // 持久化存储用户选择
  };

  return (
    <LanguageContext.Provider value={{ currentLang, changeLang, t: (key) => languages[currentLang][key] }}>
      {children}
    </LanguageContext.Provider>
  );
};

// 封装自定义Hook，方便组件调用
export const useLang = () => useContext(LanguageContext);

2. 在入口文件包裹根组件：

// src/index.js
import { LanguageProvider } from './contexts/LanguageContext';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <LanguageProvider>
    <App />
  </LanguageProvider>
);

3. 任意组件都可以全局访问语言状态：

// 任意业务组件使用示例
const AnyComponent = () => {
  const { t } = useLang();
  return <button>{t('button')}</button>
}

// 修改后的RightNav组件
const RightNav = ({ open }) => {
  const { changeLang, t } = useLang();
  return (
    <Ul open={open}>
      <li>{t('about')}</li>
      <li>{t('project')}</li>
      <li>{t('contact')}</li>
      <li className="image" onClick={() => changeLang('en')}>
        <img src={English} alt="EN" />
      </li>
      {/* 其余语言点击逻辑同上 */}
    </Ul>
  )
}

方案2：全局状态管理库（适合中大型项目） #

如果你的项目已经在使用Zustand、Jotai、Redux等状态管理工具，直接把语言状态存在全局store中即可，所有组件从store读取语言值，切换时更新store就可以实现全局同步。

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