Material-ui 中 AppBar 内的 MenuItem 导航

Question

我正在尝试在 Material-ui 中的 AppBar 内编写一个导航栏。我有以下代码。

目前，使用@material-ui/core 版本3.9.2。

class Header extends Component {

  handleMenuOpen = ev => {
    this.setState({ anchorAccountMenu: ev.currentTarget });
  }

  handleMenuClose = ev => {
    this.setState({ anchorAccountMenu: null });
  }

  menuGotoUrl = siteUrl => ev => {

    console.log(siteUrl);

    this.props.history.push(siteUrl);
    this.handleMenuClose(ev);
  }

  render() {
    let { classes } = this.props;
    let { anchorAccountMenu } = this.state;
    const user = UserService.currentUser();
    let userFirstChar = user.name.charAt(0).toUpperCase();

    return (<AppBar><Toolbar>     
      { /* Some more content here... */ } 
      <Button onClick={ this.handleMenuOpen }>
        <span className={ classes.nameInButton }>{ `${user.name}` }</span>
        <Avatar className={ classes.avatar }>{ userFirstChar }</Avatar>
      </Button>

      <Menu
        id="user-menu" anchorEl={ anchorAccountMenu }
        getContentAnchorEl= { null }
        disableAutoFocusItem={ true }
        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
        transformOrigin={{ vertical: "top", horizontal: "right" }}
        open={ !!anchorAccountMenu } onClose={ this.handleMenuClose }>

        <MenuItem onClick={ this.menuGotoUrl("/profile/edit") }>
          <ListItemIcon className={ classes.menuIcon }>
            <Icon className="far fa-fw fa-user" />
          </ListItemIcon>
          <ListItemText inset primary="Profile" />
        </MenuItem>

        <MenuItem onClick={ this.handleLogout }>
          <ListItemIcon className={ classes.menuIcon }>
            <Icon className="fas fa-fw fa-sign-out-alt" />
          </ListItemIcon>
          <ListItemText inset primary="Logout" />
        </MenuItem>
      </Menu>
    </Toolbar></AppBar>)
  }
}

export default withRouter(withStyles(styles)(Header));

问题是当我选择配置文件 menuItem 时，它返回错误，而不是通过 react-routes-dom 导航到 /profile/edit 并关闭菜单。

错误：

react-dom.development.js:57 Uncaught Invariant Violation: Unable to find node on an unmounted component.
    at invariant (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:57:19)
    at findCurrentFiberUsingSlowPath (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4395:31)
    at findCurrentHostFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4407:27)
    at findHostInstanceWithWarning (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21470:25)
    at Object.findDOMNode (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22022:18)
    at ref (webpack-internal:///./node_modules/@material-ui/core/MenuList/MenuList.js:203:46)
...
...

我在这里缺少什么？谢谢。

Answer 1

我终于通过将<Menu/> 与<MenuList /> 一起解决了这个问题。不知道内部有什么不同。这也是the alternative of building menu from material-ui from the doc。

具体来说，我就是这样做的：

  render() {
    let { classes } = this.props;
    let { anchorAccountMenu } = this.state;
    const user = UserService.currentUser();
    let userFirstChar = user.name.charAt(0).toUpperCase();

    return (<AppBar><Toolbar>     
      { /* Some more content here... */ } 
      <Button onClick={ this.handleMenuOpen }>
        <span className={ classes.nameInButton }>{ `${user.name}` }</span>
        <Avatar className={ classes.avatar }>{ userFirstChar }</Avatar>
      </Button>

      <Popper open={ !!anchorAccountMenu } anchorEl={ anchorAccountMenu }
        transition disablePortal>{ ({ TransitionProps }) => (
        <Grow {...TransitionProps} id="menu-item-grow"
          style={{ transformOrigin: 'center top' }}
          ><Paper><ClickAwayListener onClickAway={ this.handleMenuClose }>
          <MenuList>

            <MenuItem onClick={ this.menuGotoUrl("/profile/edit") }>
              <ListItemIcon className={ classes.menuIcon }>
                <Icon className="far fa-fw fa-user" />
              </ListItemIcon>
              <ListItemText inset primary="Profile" />
            </MenuItem>

            <MenuItem onClick={ this.handleLogout }>
              <ListItemIcon className={ classes.menuIcon }>
                <Icon className="fas fa-fw fa-sign-out-alt" />
              </ListItemIcon>
              <ListItemText inset primary="Logout" />
            </MenuItem>

          </MenuList>
        </ClickAwayListener></Paper></Grow>
      ) }</Popper>
    </Toolbar></AppBar>)
  }
}