React MUI 标题组件未打开侧栏抽屉

Question

我有 header 、 sidenav 和主要组件。单击标题中的图标，应打开侧导航。页面变暗，但左侧的侧边导航没有出现。此外，我想在侧边导航打开时将主要内容推到右侧。对于我在侧导航中添加的测试，当我单击标题图标时，它会打开。但我无法实现我真正想要的，即当我单击标题图标时打开侧导航。 标题.tsx

export default function Header() {

  const [open, setOpen] = React.useState(false);

  const toggleDrawer = (newOpen: boolean) => () => {
    setOpen(newOpen);
  };
return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
            onClick={toggleDrawer(true)}
          >                   
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>          
          <Drawer
           open={open} 
           onClose={toggleDrawer(false)} 
            >
                <SideNav/>                 
          </Drawer>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

Sidenav.tsx

   export default function SideNav() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = (newOpen: boolean) => () => {
    setOpen(newOpen);
  };

  const DrawerList = (
    <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
      <List>
        {['SideInbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    
    </Box>
  );
  return (
    <div>
      {/* <Button onClick={toggleDrawer(true)}>Open drawer</Button> */}
      <Drawer 
        open={open} 
        onClose={toggleDrawer(false)}
        variant="persistent"
        anchor="left"
        >
       {DrawerList}
      </Drawer>
    </div>
  );
}

Answer 1

你可以这样做

• 在 HOC（高阶组件）中定义 [open, setOpen]。 然后像这样在更高的组件中调用标题和侧导航，并在其中传递切换方法。

 const [open, setOpen] = useState(false);

  const toggleDrawer = (newOpen: boolean) => () => {
    setOpen(newOpen);
  };

  return (
    <div>
      <Header toggleDrawer={toggleDrawer} />
      <SideNav open={open} toggleDrawer={toggleDrawer} />
      {/* Main content */}
    </div>
  );

现在这是您的 Header.tsx

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

export default function Header({ toggleDrawer }: { toggleDrawer: () => void }) {
  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton
          size="large"
          edge="start"
          color="inherit"
          aria-label="menu"
          sx={{ mr: 2 }}
          onClick={toggleDrawer(true)} // Call the toggleDrawer function from props
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          News
        </Typography>
        <Button color="inherit">Login</Button>
      </Toolbar>
    </AppBar>
  );
}

Sidenav.tsx。

import React from 'react';
import { Drawer, Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
import InboxIcon from '@mui/icons-material/Inbox';
import MailIcon from '@mui/icons-material/Mail';

export default function SideNav({ open, toggleDrawer }: { open: boolean; toggleDrawer: () => void }) {
  const DrawerList = (
    <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
      <List>
        {['SideInbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Box>
  );

  return (
    <div>
      <Drawer open={open} onClose={toggleDrawer(false)} variant="persistent" anchor="left">
        {DrawerList}
      </Drawer>
    </div>
  );
}