React Functional Components中通过Header按钮控制侧边菜单状态的方法

你的核心问题是状态没有在组件间共享——Header和LateralMenu各自维护独立的lateralIsOpen状态，所以点击Header的按钮无法影响侧边菜单的显示状态。正确的做法是使用React的「状态提升」，将状态放到共同的父组件（App）中，再通过props传递给子组件。

修正后的完整代码 #

App.js（父组件，维护共享状态）

import { useState } from 'react';
import Header from './Header';
import LateralMenu from './LateralMenu';

function App() {
  // 把共享状态放在App组件中
  const [lateralIsOpen, setLateralIsOpen] = useState(true);

  // 定义切换菜单的函数
  const toggleLateralMenu = () => {
    // 使用函数式更新确保状态更新的正确性
    setLateralIsOpen(prevState => !prevState);
  };

  return (
    <div className="App">
      {/* 将切换函数传递给Header */}
      <Header onToggleMenu={toggleLateralMenu} />
      <div>
        {/* 将状态传递给LateralMenu */}
        <LateralMenu isOpen={lateralIsOpen} />
      </div>
    </div>
  );
}

export default App;

Header.js（子组件，触发状态变更）

// 接收父组件传递的切换函数
function Header({ onToggleMenu }) {
  return (
    <header>
      {/* 绑定点击事件到父组件的切换函数 */}
      <div onClick={onToggleMenu} style={{ cursor: 'pointer', padding: '8px' }}>
        切换菜单
      </div>
    </header>
  );
}

export default Header;

LateralMenu.js（子组件，根据状态渲染）

// 接收父组件传递的状态
function LateralMenu({ isOpen }) {
  return (
    <section style={{ padding: '16px', backgroundColor: '#f5f5f5' }}>
      {isOpen ? "侧边菜单已展开" : "侧边菜单已收起"}
    </section>
  );
}

export default LateralMenu;

关键说明 #

1. 状态提升：将原本分散在子组件中的状态移到共同父组件，确保所有依赖该状态的组件都能获取到一致的状态值。
2. props传递：
   • 给Header传递onToggleMenu函数，让它能触发状态变更；
   • 给LateralMenu传递isOpen状态，让它能根据状态渲染不同内容；
3. 函数式状态更新：使用setLateralIsOpen(prevState => !prevState)而非直接!lateralIsOpen，避免在异步更新场景下出现状态不一致的问题。

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