Question

嗨，我是新来的反应者，想在我的菜单中实现子菜单。

我想要的是这样的报告>我的报告> MIS报告

我正在从React Router dom导入并使用NavLink。

菜单当前看起来像这样，没有子菜单：

这是我使用导航栏链接的代码：

componentDidMount()

Answer 1

请注意，对于嵌套导航，您可以使用Material UI中的ListItem和Collapse组件，如下所示：

       <ListItem button onClick={this.handleClick}>  // Report level
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Report" />
          {open ? <ExpandLess /> : <ExpandMore />}
        </ListItem>
        <Collapse in={open} timeout="auto" unmountOnExit>  //first nested level
          <List component="div" disablePadding>
            <ListItem
              button
              style={styles.nested}
              onClick={this.handleClickSecondLevel}
            >
              <ListItemIcon>
                <StarBorder />
              </ListItemIcon>
              <ListItemText primary="My Report" />
              {openSecondLevel ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            <Collapse in={openSecondLevel} timeout="auto" unmountOnExit>  // second nested level
              <List component="div" disablePadding>
                <ListItem button style={styles.nestedSecondLevel}>
                  <ListItemIcon>
                    <StarBorder />
                  </ListItemIcon>
                  <ListItemText primary="MIS Report" />
                </ListItem>
              </List>
            </Collapse>
          </List>
        </Collapse>

Here使用类组件的codeandbox示例。

如何制作导航链接的子菜单？

1 个答案: