MaterialUI(MUI) DataGrid如何通过props传递处理函数供actions类型列使用

实现方案 #

你只需要把columns配置放在你封装的DataGrid组件内部定义，就可以直接访问到传入的props事件处理函数，绑定到对应的GridActionsCellItem的onClick即可。

完整示例代码 #

自定义封装DataGrid组件

import { DataGrid, GridActionsCellItem, GridRowParams } from '@mui/x-data-grid';
// 按需引入要使用的图标
import DeleteIcon from '@mui/icons-material/Delete';
import PrintIcon from '@mui/icons-material/Print';

const CustomDataGrid = (props) => {
  // 从props中取出传入的处理函数
  const { deleteHandler, printHandler, ...restProps } = props;

  // 列配置写在组件内部，可直接访问上面的deleteHandler、printHandler
  const columns = [
    // 你的其他业务列配置写在这里
    // ...
    {
      field: 'actions',
      type: 'actions',
      getActions: (params: GridRowParams) => [
        <GridActionsCellItem 
          icon={<DeleteIcon />} 
          // 绑定删除处理函数，同时将当前行数据作为参数传出
          onClick={() => deleteHandler(params.row)} 
          label="Delete" 
        />,
        <GridActionsCellItem 
          icon={<PrintIcon />} 
          onClick={() => printHandler(params.row)} 
          label="Print" 
          showInMenu 
        />,
      ]
    }
  ];

  return (
    <DataGrid
      {...restProps}
      columns={columns}
    />
  )
}

export default CustomDataGrid;

父组件调用方式

和你预期的用法完全一致：

// 父组件中调用
<CustomDataGrid 
  deleteHandler={(row) => console.log('执行删除操作，当前行数据：', row)}
  printHandler={(row) => console.log('执行打印操作，当前行数据：', row)}
  // 其他DataGrid原生支持的props，比如rows、pagination、autoHeight等
  rows={你的业务行数据}
/>

补充适配场景 #

如果你已经把columns配置单独抽离成了外部文件，可以把处理函数作为参数传入生成columns的函数即可：

// 单独抽离的columns配置文件 columns-config.js
export const getColumns = (deleteHandler, printHandler) => [
  // 其他业务列配置
  // ...
  {
    field: 'actions',
    type: 'actions',
    getActions: (params) => [
      <GridActionsCellItem icon={<DeleteIcon />} onClick={() => deleteHandler(params.row)} label="Delete" />,
      <GridActionsCellItem icon={<PrintIcon />} onClick={() => printHandler(params.row)} label="Print" showInMenu />
    ]
  }
]

// 组件内使用
import { getColumns } from './columns-config';
const CustomDataGrid = (props) => {
  const { deleteHandler, printHandler, ...rest } = props;
  const columns = getColumns(deleteHandler, printHandler);
  return <DataGrid {...rest} columns={columns} />
}

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