DataGridPro内Menu组件报错：anchorEl无效及菜单位置异常求助

核心原因 #

错误提示The anchorEl prop provided to the component is invalid. The anchor element should be part of the document layout，本质是传给Menu的anchorEl要么为null，要么对应的DOM元素已被移除/不在当前文档流中，导致Menu无法正确定位，最终 fallback 到屏幕左侧。

修复步骤 #

1. 确保锚点元素正确获取 #

在渲染行操作按钮时，直接通过事件对象的currentTarget获取触发元素，避免引用失效：

const handleMenuOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
  setAnchorEl(event.currentTarget); // 直接绑定当前点击的按钮DOM
};

2. 处理虚拟滚动导致的元素卸载 #

DataGridPro开启虚拟滚动时，不在视口内的行会被卸载，若菜单打开时滚动行离开视口，锚点元素会消失引发错误。需在菜单关闭时强制清空锚点：

const handleMenuClose = () => {
  setAnchorEl(null);
};

同时给Menu添加keepMounted属性，优化体验避免锚点失效直接报错：

<Menu
  anchorEl={anchorEl}
  open={Boolean(anchorEl)}
  onClose={handleMenuClose}
  keepMounted
>
  {/* 菜单项 */}
</Menu>

3. 修正菜单定位逻辑 #

通过anchorOrigin和transformOrigin调整菜单相对于锚点的位置，避免偏移：

<Menu
  anchorEl={anchorEl}
  open={Boolean(anchorEl)}
  onClose={handleMenuClose}
  anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
  transformOrigin={{ vertical: 'top', horizontal: 'left' }}
>
  {/* 菜单项 */}
</Menu>

关键代码示例 #

import { useState } from 'react';
import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro';
import { Menu, MenuItem, IconButton } from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';

const columns: GridColDef[] = [
  // 其他列配置
  {
    field: 'actions',
    width: 70,
    renderCell: (params) => {
      const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
      const open = Boolean(anchorEl);

      const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget);
      };

      const handleClose = () => {
        setAnchorEl(null);
      };

      return (
        <>
          <IconButton onClick={handleOpen}>
            <MoreVertIcon />
          </IconButton>
          <Menu
            anchorEl={anchorEl}
            open={open}
            onClose={handleClose}
            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
            transformOrigin={{ vertical: 'top', horizontal: 'left' }}
            keepMounted
          >
            <MenuItem onClick={handleClose}>编辑</MenuItem>
            <MenuItem onClick={handleClose}>删除</MenuItem>
          </Menu>
        </>
      );
    },
  },
];

额外注意事项 #

• 状态定义在renderCell内部，确保每行的菜单状态独立，避免互相干扰
• 若存在闭包问题，可使用useCallback包裹事件处理函数，保证引用稳定

内容的提问来源于stack exchange，提问作者Akash Choudhary