Пользовательский интерфейс материала: элементы меню Nest не отображаются

Question

Я использую Material UI с React и не могу отобразить подменю.Нажатие на 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 - это компонент, используемый для элементов в блоке навигации в документации .Он использует Свернуть для вложенных элементов.Вы должны быть в состоянии смоделировать его подход к выполнению вложенных MenuItems.

Вот часть кода AppDrawerNavItem с некоторыми добавленными мной комментариями:

    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>
    );
  }