如何在MUI DataGridPro中向自定义Checkbox组件传递行或行ID？

你不能直接在componentsProps里传递row.id，因为这里只能传入静态全局属性，无法获取每行的动态数据。可以用以下两种方法实现需求：

方法一：自定义选择列的单元格渲染 #

关闭默认的选择列，自行定义一列并在renderCell中渲染自定义Checkbox，这里能直接拿到当前行的参数：

import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro';

// 定义列配置
const columns: GridColDef[] = [
  {
    field: 'selection',
    headerName: '',
    width: 50,
    renderCell: (params) => (
      <CustomCheckbox 
        checked={params.isSelected}
        onChange={(e) => params.api.selectRow(params.id, e.target.checked)}
        rowId={params.id}
        row={params.row} // 直接传递整行数据
      />
    ),
    sortable: false,
    filterable: false,
  },
  // 其他业务列...
];

// 渲染DataGridPro
<DataGridPro
  rows={data}
  columns={columns}
  checkboxSelection={false} // 关闭默认选择列
/>

方法二：通过Grid上下文获取行数据 #

如果想复用BaseCheckbox组件，可以在自定义组件中使用useGridRowContext钩子获取当前行的上下文信息：

import { Checkbox } from '@mui/material';
import { useGridRowContext } from '@mui/x-data-grid-pro';

const CustomCheckbox = (props) => {
  // 从上下文获取当前行数据
  const { row } = useGridRowContext();

  // 这里可以基于row.id做自定义逻辑
  return (
    <Checkbox
      {...props}
      // 示例：添加自定义属性或逻辑
      data-row-id={row.id}
    />
  );
};

// 渲染DataGridPro
<DataGridPro
  rows={data}
  components={{
    BaseCheckbox: CustomCheckbox
  }}
  checkboxSelection // 开启默认选择列
/>

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