reactjs - 如何使用 Material UI 在应用栏下方打开下拉菜单？

Question

我是 Material UI 新手，刚刚开始摆弄他们的 App bar with Menu example 。切换菜单下拉菜单时，它会在应用栏本身上方打开，而我希望它在导航栏下方打开。

从文档中，我了解到可以使用 anchorEl 来更改位置，如所述 in the Popover positioning guide 。但是当我将其实现到我的 menu 组件时，什么也没有发生。解决这个问题的“正确的 Material UI 方式”是什么？

class Header extends React.Component {
  state = {
    auth: true,
    anchorEl: null,
    anchorOriginVertical: 'bottom',
    anchorOriginHorizontal: 'right',
    transformOriginVertical: 'top',
    transformOriginHorizontal: 'right',
    anchorReference: 'anchorEl',
  };

  handleChange = (event, checked) => {
    this.setState({ auth: checked });
  };

  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

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

  render() {
    const { classes } = this.props;
    const { auth, anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <Typography type="title" color="inherit" className={classes.flex}>
              Title
            </Typography>
            {auth && (
              <div>
                <IconButton
                  aria-owns={open ? 'menu-appbar' : null}
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                  color="contrast"
                >
                  <AccountCircle />
                </IconButton>
                <Menu
                  id="menu-appbar"
                  anchorEl={anchorEl}
                  open={open}
                  onClose={this.handleClose}
                >
                  <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                  <MenuItem onClick={this.handleClose}>My account</MenuItem>
                </Menu>
              </div>
            )}
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

Answer 1

我让它工作的方法是在菜单本身上设置 Prop ，如下所示:

  <Menu
    id="menu-appbar"
    anchorEl={anchorEl}
    getContentAnchorEl={null}
    anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
    transformOrigin={{ vertical: 'top', horizontal: 'center' }}
    open={open}
    onClose={this.handleClose}
    className={props.classes.menu}
  >

定位 Prop (anchorOrigin、transformOrigin)来自Popover组件，请参见演示:https://mui.com/material-ui/react-popover/#anchor-playground .

我还必须放入 getContentAnchorEl={null} 才能使垂直 Prop 发挥作用，我最终从这个问题中学到了这一点 https://github.com/mui/material-ui/issues/7961 .
编辑:getContentAnchorEl 属性已在 Material UI v5 中删除，不再需要。

不确定在使用状态设置 anchor 元素的属性时如何执行此操作，但这也许可以帮助您入门。