嘿，我完全懂你的烦恼——组件嵌套层级深的时候，props一层一层传递不仅麻烦还容易出错，想转Redux又被繁琐的配置劝退对吧？别担心，现在用Redux Toolkit（官方推荐的现代化Redux方案）能大大简化流程，同时我也给你准备了几个轻量化的替代方案，咱们一步步来：

一、用Redux Toolkit实现菜单状态管理 #

Redux Toolkit把传统Redux里的action、reducer、store配置都做了封装，代码量少一半还不止，特别适合你的场景：

1. 先安装依赖 #

npm install @reduxjs/toolkit react-redux

2. 创建菜单状态Slice #

在src/features/menu/menuSlice.js里写：

import { createSlice } from '@reduxjs/toolkit';

// 初始状态：侧边栏隐藏，菜单图标默认状态
const initialState = {
  isSidebarVisible: false,
  isMenuIconToggled: false
};

const menuSlice = createSlice({
  name: 'menu',
  initialState,
  reducers: {
    // 切换侧边栏显示/隐藏
    toggleSidebar: (state) => {
      state.isSidebarVisible = !state.isSidebarVisible;
      // 顺便切换图标状态（如果需要关联的话）
      state.isMenuIconToggled = !state.isMenuIconToggled;
    },
    // 单独切换菜单图标（如果需要独立控制）
    toggleMenuIcon: (state) => {
      state.isMenuIconToggled = !state.isMenuIconToggled;
    },
    // 手动隐藏侧边栏（比如点击Link后关闭）
    hideSidebar: (state) => {
      state.isSidebarVisible = false;
      state.isMenuIconToggled = false;
    }
  }
});

// 导出action creators
export const { toggleSidebar, toggleMenuIcon, hideSidebar } = menuSlice.actions;

// 导出reducer
export default menuSlice.reducer;

3. 配置Redux Store #

在src/app/store.js里：

import { configureStore } from '@reduxjs/toolkit';
import menuReducer from '../features/menu/menuSlice';

export const store = configureStore({
  reducer: {
    menu: menuReducer // 把菜单reducer加入store
  }
});

4. 在根组件注入Store #

修改src/index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

5. 在组件里使用状态和操作 #

• Toolbar组件（触发切换）：

import { useDispatch, useSelector } from 'react-redux';
import { toggleSidebar } from '../features/menu/menuSlice';

function Toolbar() {
  const dispatch = useDispatch();
  const isMenuIconToggled = useSelector(state => state.menu.isMenuIconToggled);

  return (
    <div className="toolbar">
      <button onClick={() => dispatch(toggleSidebar())}>
        {/* 根据isMenuIconToggled显示不同图标 */}
        {isMenuIconToggled ? '✕' : '☰'}
      </button>
      <Nav />
    </div>
  );
}

• Sidebar组件（获取显示状态）：

import { useSelector, useDispatch } from 'react-redux';
import { hideSidebar } from '../features/menu/menuSlice';
import Nav from './Nav';

function Sidebar() {
  const isSidebarVisible = useSelector(state => state.menu.isSidebarVisible);
  const dispatch = useDispatch();

  // 点击侧边栏外部或者Link后关闭
  const handleClose = () => dispatch(hideSidebar());

  return (
    <div className={`sidebar ${isSidebarVisible ? 'visible' : ''}`}>
      <button onClick={handleClose}>✕</button>
      <Nav onLinkClick={handleClose} /> {/* 如果需要点击Link关闭，传递这个方法 */}
    </div>
  );
}

• Link组件（如果需要触发关闭）：

function Link({ to, children, onLinkClick }) {
  return (
    <a 
      href={to} 
      onClick={(e) => {
        e.preventDefault();
        // 处理路由跳转逻辑...
        if (onLinkClick) onLinkClick();
      }}
    >
      {children}
    </a>
  );
}

二、轻量化替代方案：React Context API #

如果你的项目只有菜单这一处需要跨组件状态管理，用Context可能更轻量，不用引入Redux：

1. 创建Menu Context #

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

const MenuContext = createContext();

export function MenuProvider({ children }) {
  const [isSidebarVisible, setIsSidebarVisible] = useState(false);
  const [isMenuIconToggled, setIsMenuIconToggled] = useState(false);

  const toggleSidebar = () => {
    setIsSidebarVisible(prev => !prev);
    setIsMenuIconToggled(prev => !prev);
  };

  const hideSidebar = () => {
    setIsSidebarVisible(false);
    setIsMenuIconToggled(false);
  };

  return (
    <MenuContext.Provider value={{
      isSidebarVisible,
      isMenuIconToggled,
      toggleSidebar,
      hideSidebar
    }}>
      {children}
    </MenuContext.Provider>
  );
}

// 自定义hooks简化使用
export function useMenu() {
  return useContext(MenuContext);
}

2. 在根组件包裹Provider #

// index.js
import { MenuProvider } from './MenuContext';

root.render(
  <MenuProvider>
    <App />
  </MenuProvider>
);

3. 在组件里使用 #

// Toolbar.js
import { useMenu } from './MenuContext';

function Toolbar() {
  const { toggleSidebar, isMenuIconToggled } = useMenu();
  return (
    <div className="toolbar">
      <button onClick={toggleSidebar}>
        {isMenuIconToggled ? '✕' : '☰'}
      </button>
      <Nav />
    </div>
  );
}

// Sidebar.js
import { useMenu } from './MenuContext';

function Sidebar() {
  const { isSidebarVisible, hideSidebar } = useMenu();
  return (
    <div className={`sidebar ${isSidebarVisible ? 'visible' : ''}`}>
      <button onClick={hideSidebar}>✕</button>
      <Nav onLinkClick={hideSidebar} />
    </div>
  );
}

三、总结 #

• 如果项目已经在用Redux，或者未来有更多跨组件状态管理需求，Redux Toolkit是最优解，配置比传统Redux简单太多；
• 如果只是菜单这一处状态，React Context API足够轻量，不用额外引入Redux依赖；
• 两种方案都能完美解决你之前props钻取的问题，选哪个看你项目规模和需求~

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