React中如何将导航栏下拉菜单的值传递给其他组件

核心思路：使用React Context共享状态 #

你的导航栏(NavBar)在BrowserRouter外部，没法直接通过路由props传递状态，最简洁的方式是用React Context来跨组件共享选中的用户状态，所有需要这个值的组件都能直接获取。

步骤1：创建用户状态Context #

新建UserContext.js文件，封装状态和上下文：

import { createContext, useContext, useState, useEffect } from 'react';

const UserContext = createContext();

// 提供状态的Provider组件
export function UserProvider({ children }) {
  // 初始化状态，可选从localStorage读取解决页面重置问题
  const [selectedUserId, setSelectedUserId] = useState(() => {
    return localStorage.getItem('selectedUserId') || 'user1';
  });

  // 可选：同步状态到localStorage，解决页面切换/刷新重置
  useEffect(() => {
    localStorage.setItem('selectedUserId', selectedUserId);
  }, [selectedUserId]);

  return (
    <UserContext.Provider value={{ selectedUserId, setSelectedUserId }}>
      {children}
    </UserContext.Provider>
  );
}

// 自定义Hook，简化Context调用
export function useUser() {
  return useContext(UserContext);
}

步骤2：在App中包裹Provider #

修改App.js，用UserProvider包裹整个应用，让所有组件都能访问Context：

import { UserProvider } from './UserContext';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import NavBar from './NavBar';
import Home from './Home';
import Buckets from './Buckets';
import Tables from './Tables';

function App() {
  return (
    <UserProvider>
      <div className="App">
        <NavBar />
        <BrowserRouter>
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/Buckets' element={<Buckets />} />
            <Route path='/Tables' element={<Tables />} />
          </Routes>
        </BrowserRouter>
      </div>
    </UserProvider>
  );
}

export default App;

步骤3：修改UserList组件使用Context状态 #

去掉UserList自己的useState，改用Context提供的状态和设置方法：

import { useUser } from './UserContext';

const UserList = ({ Users }) => {
  const { selectedUserId, setSelectedUserId } = useUser();

  const optionTemplate = Users.map(v => (
    <option key={v.id} value={v.id}>{v.user}</option>
  ));

  function handleClick() {
    console.log('模拟登录用户ID:', selectedUserId);
    // 这里可以添加模拟登录的逻辑，比如更新全局token等
  }

  return (
    <div className="dropdown">
      <label className='label'>
        Account: 
        <select 
          value={selectedUserId} 
          onChange={(e) => setSelectedUserId(e.target.value)}
        >
          {optionTemplate}
        </select>
      </label>
      <button onClick={handleClick}>Login</button>
    </div>
  );
};

export default UserList;

步骤4：在Buckets组件中获取选中用户并发起请求 #

在需要使用选中用户的页面组件中，通过useUserHook获取状态，然后在useEffect中发起请求：

import { useUser } from './UserContext';
import { useEffect, useState } from 'react';

const Buckets = () => {
  const { selectedUserId } = useUser();
  const [buckets, setBuckets] = useState([]);

  // 当选中用户变化时，重新请求数据
  useEffect(() => {
    fetch(`http://localhost:8000/Buckets?userId=${selectedUserId}`)
      .then(res => res.json())
      .then(data => setBuckets(data))
      .catch(err => console.error('获取Buckets数据失败:', err));
  }, [selectedUserId]);

  return (
    <div>
      <h2>Buckets (当前模拟用户: {selectedUserId})</h2>
      <ul>
        {buckets.map(bucket => (
          <li key={bucket.id}>{bucket.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Buckets;

为什么不用props传递？ #

因为你的NavBar在BrowserRouter外面，页面组件是BrowserRouter的子元素，属于不同的组件分支，用props传递需要层层透传，非常繁琐，Context是最适合这种跨组件分支共享状态的方案。

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