封装MUI DataGrid的GridActionsCellItem导致showInMenu=true时UI异常

问题原因 #

MUI DataGrid 的 actions 列在生成三点菜单时，会检查 getActions 返回数组中的每一项是否为 GridActionsCellItem 的直接 React 元素实例。你自定义的 GridActionCellWrapper 是独立的 React 组件，DataGrid 无法识别它内部封装的 GridActionsCellItem，会默认认为这个位置存在一个「不需要放入菜单」的操作项，最终导致三点菜单不触发渲染（只有当所有操作项都设置 showInMenu={true} 时，菜单才会显示）。

解决方案 #

方法1：改用函数返回 GridActionsCellItem（推荐） #

把封装逻辑改成函数，直接返回 GridActionsCellItem 元素，让 DataGrid 能正确识别：

// 替换原GridActionCellWrapper组件
const getDeleteAction = () => {
  // 在这里编写Apollo Hook调用逻辑
  const handleDelete = () => {
    console.log("abascus");
  };

  return (
    <GridActionsCellItem
      icon={<DeleteIcon />}
      label="Delete"
      onClick={handleDelete}
      showInMenu={true}
    />
  );
};

// 列配置修改
const columns = [
  { field: "name", type: "string" },
  {
    field: "actions",
    type: "actions",
    width: 80,
    getActions: (params) => [
      getDeleteAction(),
      <GridActionsCellItem
        icon={<DeleteIcon />}
        label="Delete"
        onClick={() => console.log("abascus")}
        showInMenu={true}
      />
    ]
  }
];

方法2：透传组件标识（不推荐，依赖内部实现） #

如果一定要保留自定义组件，可以通过 forwardRef 透传，并给组件添加内部标识让 DataGrid 识别：

import { forwardRef } from "react";

const GridActionCellWrapper = forwardRef((props, ref) => {
  const handleClick = () => {
    console.log("abascus");
  };

  // 添加DataGrid识别的类型标识
  const Component = GridActionsCellItem;
  Component.muiName = GridActionsCellItem.muiName;

  return (
    <Component
      ref={ref}
      icon={<DeleteIcon />}
      label="Delete"
      onClick={handleClick}
      showInMenu={true}
      {...props}
    />
  );
});

这种方法依赖 MUI 内部的类型判断逻辑，后续版本可能失效，因此优先推荐方法1。

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