Material UI：嵌套菜单项无法显示

Question

我正在使用带有 React 的 Material UI，但无法显示子菜单。单击顶级菜单中的Browse 只会关闭菜单。将鼠标悬停在其上时按 Enter 键也是如此。按右箭头键没有任何作用。

class TopNav extends React.Component {
  state = {
    anchorElement : null
  };

  handleClick = event => {
    this.setState({ anchorElement : event.currentTarget })
  };

  handleClose = () => {
    this.setState({ anchorElement : null })
  };


  render() {
    const {classes} = this.props;
    const {anchorElement} = this.state;

    return (
      <React.Fragment>
        <AppBar position='static' className={ classes.root }>
          <OuterContainer>
            <IconButton
              className={ classes.menuButton }
              onClick={this.handleClick}
            >
              <FaBars size='1.5rem' />
            </IconButton>

            <Menu
              anchorEl={anchorElement}
              open={Boolean(anchorElement)}
              onClose={this.handleClose}
            >
              <MenuItem
                onClick={this.handleClose}
              >Home</MenuItem>
              <MenuItem
                onClick={this.handleClose}
                checked={true}
                menuItems={[
                  <MenuItem>Pet Rocks</MenuItem>,
                  <MenuItem>Support Rocks</MenuItem>
                ]}
              >Browse</MenuItem>
            </Menu>
          <...removed>

我也尝试过使用 ListItem 代替 MenuItem。样式更糟，菜单没有变化，只是关闭而不是显示子菜单。

我还尝试使用 nestedItems 代替 menuItems 道具。没有任何变化。

有人知道可能是什么问题吗？

我简要地读到这个库的触摸版本存在过早关闭的问题，不确定这是否是一个潜在的问题，但我想我会注意到它。

// package.json
{
  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "dotenv": "^6.2.0",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-icons": "^3.4.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "styled-components": "^4.1.3"
  },,
  "devDependencies": {
    "lodash": "^4.17.11"
  }
}

Answer 1

MenuItem 没有用于执行嵌套菜单的 menuItems 属性，因此我希望 Browse 和 Home 的行为完全相同（我认为这就是您所看到的）。

AppDrawerNavItem 是用于documentation 中导航抽屉中的项目的组件。它使用Collapse 作为嵌套项。您应该能够模拟其执行嵌套 MenuItems 的方法。

这是AppDrawerNavItem 代码的一部分，其中包含我添加的一些 cmets：

    if (href) {
      // This is the leaf item case, so the ListItem acts as a link to the href provided.
      return (
        <ListItem className={classes.itemLeaf} disableGutters {...other}>
          <Button
            component={props => (
              <Link naked activeClassName={classes.active} href={href} {...props} />
            )}
            className={clsx(classes.buttonLeaf, `depth-${depth}`)}
            disableRipple
            onClick={onClick}
            style={style}
          >
            {title}
          </Button>
        </ListItem>
      );
    }
    // This is the case of a parent of nested items.
    // Clicking on this toggles the `open` state which opens/closes the Collapse
    // which would contain the nested items.
    return (
      <ListItem className={classes.item} disableGutters {...other}>
        <Button
          classes={{
            root: classes.button,
            label: openImmediately ? 'algolia-lvl0' : '',
          }}
          onClick={this.handleClick}
          style={style}
        >
          {title}
        </Button>
        <Collapse in={this.state.open} timeout="auto" unmountOnExit>
          {children}
        </Collapse>
      </ListItem>
    );
  }