React跨组件共享状态与事件：AppBar与Drawer联动异常求助

核心思路：状态提升 #

将控制Drawer显示的open状态放到AppBar、Drawer的共同父组件中，通过props把状态和切换逻辑传递给两个子组件，实现状态同步。

具体实现步骤 #

1. 在父组件中定义状态与切换函数 #

import { useState } from 'react';
import MyAppBar from './MyAppBar';
import MyDrawer from './MyDrawer';
import MainContent from './MainContent';

function Dashboard() {
  // 初始化Drawer关闭状态
  const [drawerOpen, setDrawerOpen] = useState(false);

  // 切换Drawer显示/隐藏的函数
  const toggleDrawer = () => {
    setDrawerOpen(prevState => !prevState);
  };

  return (
    <div style={{ display: 'flex' }}>
      {/* 向AppBar传递状态和切换函数 */}
      <MyAppBar open={drawerOpen} onToggleDrawer={toggleDrawer} />
      {/* 向Drawer传递显示状态 */}
      <MyDrawer open={drawerOpen} />
      <MainContent open={drawerOpen} />
    </div>
  );
}

export default Dashboard;

2. 修改AppBar组件，接收props绑定点击事件 #

import { AppBar, Toolbar, IconButton } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';

function MyAppBar({ open, onToggleDrawer }) {
  return (
    <AppBar 
      position="fixed"
      sx={{
        width: open ? `calc(100% - 240px)` : '100%',
        ml: open ? `240px` : 0,
        transition: 'width 0.3s, margin 0.3s',
      }}
    >
      <Toolbar>
        <IconButton
          color="inherit"
          edge="start"
          onClick={onToggleDrawer} // 调用父组件传来的切换函数
          sx={{ mr: 2, ...(open && { display: 'none' }) }}
        >
          <MenuIcon />
        </IconButton>
        {/* 其他AppBar内容 */}
      </Toolbar>
    </AppBar>
  );
}

export default MyAppBar;

3. 修改Drawer组件，用props控制显示状态 #

import { Drawer } from '@mui/material';

function MyDrawer({ open }) {
  return (
    <Drawer
      variant="persistent"
      anchor="left"
      open={open} // 绑定父组件传递的状态
      sx={{
        '& .MuiDrawer-paper': {
          width: 240,
          boxSizing: 'border-box',
        },
      }}
    >
      {/* Drawer内部内容 */}
    </Drawer>
  );
}

export default MyDrawer;

4. 同步主内容区域布局（可选） #

如果主内容需要适配Drawer展开/收起的布局，同样接收openprops调整边距：

function MainContent({ open }) {
  return (
    <main
      sx={{
        flexGrow: 1,
        padding: 3,
        marginTop: '64px',
        marginLeft: open ? '240px' : 0,
        transition: 'margin-left 0.3s',
      }}
    >
      {/* 主内容区域 */}
    </main>
  );
}

export default MainContent;

关键注意点 #

• 不要在子组件内部单独维护open状态，避免出现状态不一致的情况。
• 状态提升是React中跨组件共享状态的基础方案，适用于大多数简单的组件间状态同步场景。
• 确保MUI组件的属性（比如Drawer的open、AppBar的width/marginLeft）都依赖同一个父组件传递的状态，实现联动效果。

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