子菜单在react + Mi中无法正常工作

问题描述

我需要在我的组件下创建一个子菜单，例如：用户：添加用户-编辑用户。文件：更新文件，下载文件。如果使用“用户”子菜单，则当我将其同时打开时，可以说“打开”状态对两者均有效，但是我想使它们独立，例如：打开“用户”菜单，然后按：添加用户-编辑用户。还有包含子菜单的文件，它们保持关闭状态，只有在单击时才打开。 我正在使用React.js，material-ui请帮助我！

  const useStyles = makeStyles ((theme: Theme) =>
  createStyles ({
    root: {
      width: '100%',maxWidth: 360,backgroundColor: theme.palette.background.paper,},nested: {
      paddingLeft: theme.spacing (4),}),);

export default function ListMenuUp () {
  const classes = useStyles ({settings: [{id: "1",open: false},{id: "2",open: false}]});
  const [open,setopen] = React.useState (true);

  const handleClick = () => {
    setopen (! open);
  };

  return (
    <List
      component = "nav"
      aria-labeledby = "nested-list-subheader"
      subheader = {
        <ListSubheader component = "div" id = "nested-list-subheader">
         Control panel
        </ListSubheader>
      }
      className = {classes.root}
    >
       {/ * DashBoard starts here * /}
      <ListItem button component = "a" href = "/ admin">
        <ListItemIcon>
          <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary = "DashBoard" />
      </ListItem>
       {/ * Here begins the Archives * /}
      <ListItem button onClick = {handleClick}>
        <ListItemIcon>
          <SupervisedUserCircleIcon />
        </ListItemIcon>
        <ListItemText primary = "Users" />
        {open? <ExpandLess />: <ExpandMore />}
      </ListItem>
      <Collapse in = {open} timeout = "auto" unmountOnExit>
        <List component = "div" disablePadding>
          <ListItem button component = "a" href = "/ admin / users / register" className = {classes.nested}>
            <ListItemIcon>
              <AddIcon />
            </ListItemIcon>
            <ListItemText primary = "Register" />
          </ListItem>
        </List>

        {/ * Here begins another User from the same list * /}
        <List component = "div" disablePadding>
          <ListItem button component = "a" href = "/ admin / users" className = {classes.nested}>
            <ListItemIcon>
              <EditIcon />
            </ListItemIcon>
            <ListItemText primary = "Edit" />
          </ListItem>
          
        </List>
      </Collapse>


      {/ * Here begins the Archives * /}
      <ListItem button>
        <ListItemIcon>
          <CloudUploadIcon />
        </ListItemIcon>
        <ListItemText primary = "Files" />
      </ListItem>

      {/* Others*/}

 {/ * Here begins the New * /}

 <ListItem button onClick = {handleClick}>
        <ListItemIcon>
          <SupervisedUserCircleIcon />
        </ListItemIcon>
        <ListItemText primary = "New" />
        {open? <ExpandLess />: <ExpandMore />}
      </ListItem>
      <Collapse in = {open} timeout = "auto" unmountOnExit>
        <List component = "div" disablePadding>
          <ListItem button component = "a" href = "/ admin / users / register" className = {classes.nested}>
            <ListItemIcon>
              <AddIcon />
            </ListItemIcon>
            <ListItemText primary = "NewOne" />
          </ListItem>
        </List>

        {/ * Here begins another User from the same list * /}
        <List component = "div" disablePadding>
          <ListItem button component = "a" href = "/ admin / users" className = {classes.nested}>
            <ListItemIcon>
              <EditIcon />
            </ListItemIcon>
            <ListItemText primary = "NewTwo" />
          </ListItem>
          
        </List>
      </Collapse>
   
 
    </List>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）