如何在MUI X Data Grid Pro中为自定义行复选框传递行ID

要让自定义行复选框拿到对应的行ID，核心是利用Data Grid给BaseCheckbox组件传递的内置行上下文参数，具体步骤如下：

• 用MUI X提供的BaseCheckboxProps类型替代原生CheckboxProps，这个类型继承了复选框基础属性，还额外包含行ID、行数据等上下文信息
• 自定义组件直接从props中读取id字段，就能拿到当前复选框所属的行ID

完整代码示例 #

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

// 自定义复选框组件，props自带行ID等上下文信息
const customCheckbox = (props: BaseCheckboxProps) => {
  // props.id 就是当前复选框对应的行ID
  const isIndeterminate = someArray.includes(props.id);
  return <Checkbox {...props} indeterminate={isIndeterminate} />;
};

// 渲染DataGridPro
<DataGridPro
  {...data}
  components={{
    BaseCheckbox: customCheckbox,
  }}
/>

补充说明 #

如果需要给复选框传递额外的外部状态（比如someArray是组件外的状态），可以通过componentsProps的函数形式传递，函数会接收行参数，按需注入数据：

<DataGridPro
  {...data}
  components={{
    BaseCheckbox: customCheckbox,
  }}
  componentsProps={{
    baseCheckbox: (params) => ({
      // 把外部状态传递到自定义组件
      externalState: yourExternalData,
    }),
  }}
/>

此时自定义组件的props会包含externalState字段，直接使用即可。

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