MUI X-DataGrid中GridActionsCellItem传参报错及操作列需求

错误原因 #

你直接把<GridActionsCellItem />组件实例作为getActions的返回值了，但DataGrid的actions列要求getActions返回的是GridActionsCellItem的配置对象数组，而非JSX元素。那些报错缺失的nonce、onResize等属性，是DataGrid内部传递给单元格组件的私有属性，直接返回组件会导致类型不匹配。

正确配置方式 #

下面是实现带有三点下拉菜单的操作列的完整示例：

import { DataGrid, GridColDef, GridActionsCellItemProps } from '@mui/x-data-grid';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import MoreVertIcon from '@mui/icons-material/MoreVert';

// 操作函数示例
const handleEdit = (id: number) => {
  console.log('编辑行:', id);
};

const handleDelete = (id: number) => {
  console.log('删除行:', id);
};

const columns: GridColDef[] = [
  // 其他业务列配置...
  {
    field: 'actions',
    type: 'actions',
    width: 100,
    getActions: (params): GridActionsCellItemProps[] => [
      // 直接显示在单元格的操作项（可选）
      {
        icon: <EditIcon />,
        label: '编辑',
        onClick: () => handleEdit(params.id as number),
        showInMenu: false, // 默认值，不放入下拉菜单
      },
      // 放入三点下拉菜单的操作项
      {
        icon: <DeleteIcon />,
        label: '删除',
        onClick: () => handleDelete(params.id as number),
        showInMenu: true, // 标记为菜单内选项
      },
      // 仅显示三点菜单的配置（如果不需要直接显示的操作项）
      // {
      //   icon: <MoreVertIcon />,
      //   label: '更多操作',
      //   showInMenu: false,
      //   menuItems: [
      //     { label: '编辑', onClick: () => handleEdit(params.id as number) },
      //     { label: '删除', onClick: () => handleDelete(params.id as number) },
      //   ],
      // },
    ],
  },
];

// 组件使用
export default function MyDataGrid() {
  return <DataGrid rows={[]} columns={columns} />;
}

关键注意点 #

• getActions必须返回GridActionsCellItemProps类型的对象数组，DataGrid会自动将这些对象渲染为GridActionsCellItem组件，并注入内部所需的属性，彻底解决类型错误。
• 通过showInMenu: true将操作项放入三点下拉菜单；如果想仅显示菜单图标，可配置一个带MoreVertIcon的项，并用menuItems定义下拉选项。
• 确保columns的类型为GridColDef[]，TypeScript会自动推导getActions的参数类型，无需手动指定。

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