提供的 MUI anchorEl 道具无效

Question

我正在尝试编写一个移动菜单，当用户点击菜单图标时，菜单就会显示出来。

我有以下代码：

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5',
  },
})((props, ref) => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
    {...props}
  />
))`

和组件：

export default function Header(props) {
  const [state, setState] = useState({ mobileView: true, drawerOpen: false, anchorEl: null, openItem: null })
  const { mobileView, drawerOpen, anchorEl } = state
  const classes = useStyles()

  useEffect(() => {
    const setResponsiveness = () => {
      return window.innerWidth < 900
        ? setState((prevState) => ({ ...prevState, mobileView: true }))
        : setState((prevState) => ({ ...prevState, mobileView: false }));
    };

    setResponsiveness();
    window.addEventListener("resize", () => setResponsiveness());

    return () => {
      window.removeEventListener("resize", () => setResponsiveness());
    }
  }, []);

const MobileMenu = (props) => {
    const handleClick = (id) => {
      if (state.openItem === id) {
        setState((prevState) => ({ ...prevState, openItem: null }))
      } else {
        setState((prevState) => ({ ...prevState, openItem: id }))
      }
    }

    const handleDrawerOpen = (event) =>
      setState((prevState) => ({ ...prevState, drawerOpen: true, anchorEl: event.currentTarget }));
    const handleDrawerClose = () =>
      setState((prevState) => ({ ...prevState, drawerOpen: false }));

    return (
      <Toolbar>
        <IconButton
          {...{
            edge: "start",
            color: "inherit",
            "aria-label": "menu",
            "aria-haspopup": "true",
            variant: "contained",
            onClick: handleDrawerOpen,
          }}
        >
          <MenuIcon className={classes.menuIcon} fontSize='40px' />
        </IconButton>
        <StyledMenu
          {...{
            id: 'custom-menu',
            anchor: "left",
            open: drawerOpen,
            onClose: handleDrawerClose,
            anchorEl: anchorEl
          }}

        >
          <List component='nav' className={classes.appMenu} disablePadding>
            {menuItems.map((item, index) => {
              const hasSubMenus = item.hasOwnProperty('subMenus')
              const ListItemLink = () => {
                return (
                  <ListItem key={index} button component={Link} to={item.link} className={classes.menuItem}>
                    <ListItemText>{item.label}</ListItemText>
                  </ListItem>
                )
              }
              const ListItemToggle = () => (
                <ListItem key={index} button onClick={() => handleClick(index)} className={classes.menuItem}>
                  <ListItemText>{item.label}</ListItemText>
                  {index === state.openItem ? <IconExpandLess /> : <IconExpandMore />}
                </ListItem>
              )
              return (
                <React.Fragment key={index}>
                  {!hasSubMenus ? <ListItemLink /> :
                    <>
                      <ListItemToggle />
                      <Collapse in={index === state.openItem} timeout='auto' className={classes.collapseWrapper}>
                        <div className={classes.collapseDiv}>
                          <Divider />
                          <List component='div' disablePadding>
                            {item.subMenus.map((el, key) => (
                              <ListItem key={key} button component={Link} to={el.link} className={classes.menuItem}>
                                <ListItemText inset>{el.label}</ListItemText>
                              </ListItem>
                            ))}
                          </List>

                        </div>
                      </Collapse>
                    </>
                  }
                </React.Fragment>
              )
            })}
          </List>
        </StyledMenu>

        <Logo />
      </Toolbar>
    )
  }

单击按钮时，出现以下错误：

React 无法识别 DOM 元素上的 getContentAnchorEl 属性。

MUI：提供给组件的anchorEl 属性无效。 锚元素应该是文档布局的一部分。 确保该元素存在于文档中或不显示任何元素。

Answer 1

我通过将anchorEl状态从父（Header）组件状态移动到本地（MobileMenu）组件来解决了这个问题。