MUI X Data Grid如何基于复选框选中状态实现条件单元格渲染

要实现选中行时移除对应的ChooseNumber组件，你不能直接从params.row里获取选中状态——因为行的选中状态存储在Data Grid的全局状态中，不属于行数据本身的属性。可以按照以下方式实现：

1. 引入必要的钩子 #

从@mui/x-data-grid中导入获取选中状态的钩子：

import { useGridSelector, gridSelectionSelector, useGridApiContext } from '@mui/x-data-grid';

2. 获取当前选中的行ID #

在Data Grid所在的组件（或自定义单元格组件）中，通过钩子拿到选中行的ID集合：

// 如果是Data Grid同层级组件，直接声明apiRef并传入DataGrid
const apiRef = useGridApiContext();
const selectedRowIds = useGridSelector(apiRef, gridSelectionSelector);

3. 修改单元格渲染逻辑 #

在列配置的renderCell函数中，判断当前行ID是否在选中集合里，决定是否渲染ChooseNumber：

const columns = [
  // 其他列配置
  {
    field: 'counter',
    headerName: '计数器',
    renderCell: (params) => {
      const isRowSelected = selectedRowIds.has(params.id);
      // 选中行则不渲染组件，否则正常渲染
      return isRowSelected ? null : <ChooseNumber />;
    },
  },
];

完整示例代码 #

import { DataGrid, useGridApiContext, useGridSelector, gridSelectionSelector } from '@mui/x-data-grid';
import ChooseNumber from './ChooseNumber'; // 你的自定义计数器组件

function MyDataGrid() {
  const apiRef = useGridApiContext();
  const selectedRowIds = useGridSelector(apiRef, gridSelectionSelector);

  const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'name', headerName: '名称', width: 130 },
    {
      field: 'counter',
      headerName: '计数器',
      width: 150,
      renderCell: (params) => {
        const isSelected = selectedRowIds.has(params.id);
        return isSelected ? null : <ChooseNumber />;
      },
    },
  ];

  const rows = [
    { id: 1, name: '行1' },
    { id: 2, name: '行2' },
    { id: 3, name: '行3' },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        apiRef={apiRef}
        rows={rows}
        columns={columns}
        checkboxSelection // 开启复选框选择功能
      />
    </div>
  );
}

export default MyDataGrid;

如果需要让ChooseNumber组件自己控制显示逻辑，也可以把选中状态作为props传入：

return <ChooseNumber isHidden={isRowSelected} />;

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