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没有用于执行嵌套菜单的func loadPosts() { let query = PFQuery(className:"Post") query.order(byDescending: "createdAt") query.includeKey("user") query.limit = initialLimit query.findObjectsInBackgroundWithBlock { (objects: [PFObject]?, error: Error?) in if error != nil { print(error) } else { print("Successfully retrieved \(objects!.count) posts. - Home View Controller") self.posts = objects print("\(self.initialLimit) is now the limit") self.tableView.reloadData() } } as! PFQueryArrayResultBlock }属性，因此我希望Browse和Home的行为完全相同（我认为这是您所看到的）。

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

这是menuItems代码的一部分，我在其中添加了一些评论：

AppDrawerNavItem

材质用户界面：嵌套菜单项无法显示

1 个答案: