React语言切换时如何将Navbar组件的选中语言状态传递给其他组件

问题核心原因 #

1. 你之前将selected语言状态定义在Navbar组件内部，属于组件私有状态，其他业务组件默认无法访问这个状态
2. 你写的<Navbar {...selected} />存在两个错误：
   • 方向错误：你需要把Navbar内的状态向外传递给其他组件，而非向Navbar内部传值
   • 语法错误：selected是字符串类型，展开运算符...直接展开字符串会把每个字符单独作为prop传递，完全不符合预期

解决方法 #

方案1：状态提升（适合小型项目、组件层级不超过3层） #

将语言状态和切换逻辑提升到所有需要用到语言的组件的公共父组件中（比如根页面/App组件），再通过props向下分发。

父组件代码示例：

import { useState } from 'react';
import cookies from 'js-cookie';
import Navbar from './Navbar';
import Content from './Content'; // 其他需要多语言的业务组件

export default function App() {
  // 初始值优先读取cookie中保存的语言，避免刷新后重置
  const [selectedLang, setSelectedLang] = useState(() => cookies.get('chosenLang') || 'en-us');

  const handleChangeLang = (lang) => {
    cookies.set('chosenLang', lang);
    setSelectedLang(lang);
  };

  return (
    <div className="app">
      {/* 向Navbar传递切换方法和当前选中的语言 */}
      <Navbar onChangeLang={handleChangeLang} currentLang={selectedLang} />
      {/* 向业务组件传递当前语言 */}
      <Content lang={selectedLang} />
    </div>
  );
}

Navbar组件改造：

export default function Navbar({ onChangeLang, currentLang }) {
  return (
    <nav>
      <button 
        onClick={() => onChangeLang('en-us')}
        disabled={currentLang === 'en-us'}
      >
        EN
      </button>
      <button 
        onClick={() => onChangeLang('fr-fr')}
        disabled={currentLang === 'fr-fr'}
      >
        FR
      </button>
    </nav>
  );
}

方案2：React Context（适合中大型项目、多组件需要共用语言状态） #

通过Context全局维护语言状态，所有组件无论层级多深都可以直接读取，避免逐层传props的冗余。

第一步：创建语言上下文

新建src/contexts/LangContext.jsx文件：

import { createContext, useContext, useState } from 'react';
import cookies from 'js-cookie';

const LangContext = createContext();

// 全局提供器，需要包裹整个应用
export function LangProvider({ children }) {
  const [currentLang, setCurrentLang] = useState(() => cookies.get('chosenLang') || 'en-us');

  const changeLang = (lang) => {
    cookies.set('chosenLang', lang);
    setCurrentLang(lang);
  };

  return (
    <LangContext.Provider value={{ currentLang, changeLang }}>
      {children}
    </LangContext.Provider>
  );
}

// 封装自定义hook，简化调用
export function useLang() {
  return useContext(LangContext);
}

第二步：全局注册上下文

在入口文件（比如main.jsx）中用LangProvider包裹整个应用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { LangProvider } from './contexts/LangContext';
import App from './App';

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

第三步：Navbar组件调用

import { useLang } from '../contexts/LangContext';

export default function Navbar() {
  const { currentLang, changeLang } = useLang();
  return (
    <nav>
      <button onClick={() => changeLang('en-us')} disabled={currentLang === 'en-us'}>EN</button>
      <button onClick={() => changeLang('fr-fr')} disabled={currentLang === 'fr-fr'}>FR</button>
    </nav>
  );
}

第四步：其他业务组件调用

任意需要读取语言的组件都可以直接调用useLang获取状态：

import { useLang } from '../contexts/LangContext';

export default function Content() {
  const { currentLang } = useLang();
  // 传入currentLang给CMS翻译逻辑即可
  return <div>当前语言：{currentLang}</div>;
}

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