动态材质 UI 下拉菜单

Question

我正在使用 material-ui js 创建一个动态下拉菜单，但是当我单击其中一个菜单时，它会打开所有菜单，反之亦然。法典

Answer 1

您正在为两个菜单链接维护 1 个状态。维护列表的名称（页面标题）。在函数中，使用键动态设置/切换状态对象。handlerListOpen

您的代码和框的工作副本

代码片段：

export default function App() {

  const [openList, setopenList] = React.useState({});

  const handlerListOpen = el => {

    console.log("el", el.currentTarget.getAttribute("name"));

    const target = el.currentTarget;

    setopenList(prev => ({

      ...prev,

      [target.getAttribute("name")]: !prev[

        target.getAttribute("name")

      ]

    }));

  };

  return (

    <List component={"nav"}>

      {pages.map((page, index) => (

        <List>

          <ListItem name={page.title} button onClick={handlerListOpen}>

            <ListItemIcon>{pages.icon}</ListItemIcon>

            <ListItemText primary={page.title} />

            {openList[page.title] ? <ExpandLess /> : <ExpandMore />}

          </ListItem>

          {page.collapse.map((collapse, index) => (

            <Collapse in={openList[page.title]} timeout="auto" unmountOnExit>

              <li>

                {" "}

                <Link to={collapse.href}>

                  <List component="div" disablePadding key={index}>

                    <ListItem button>

                      <ListItemIcon>{collapse.icon}</ListItemIcon>

                      <ListItemText primary={collapse.title} />

                      <ListItemIcon>

                        <ChevronRightIcon />

                      </ListItemIcon>

                    </ListItem>

                  </List>

                </Link>

              </li>

            </Collapse>

          ))}

        </List>

      ))}

    </List>

  );

}