React-Admin v3.19自定义DataGrid手动触发行展开事件的方法

要实现自定义Datagrid的行展开，你需要利用React-Admin内置的展开状态管理机制，具体修改如下：

1. 接收展开相关Props #

在自定义的MyDatagridRow组件中，添加expanded（当前行是否展开）和onToggleExpand（触发展开/收起的方法）两个参数：

const MyDatagridRow = ({ 
  record, resource, id, onToggleItem, children, selected, selectable, basePath,
  expanded, // 新增：当前行展开状态
  onToggleExpand // 新增：切换展开状态的方法
}) => {
  // 计算总列数：选择框列 + 展开按钮列 + 字段列数量
  const columnCount = 2 + React.Children.count(children);

  return (
    <>
      <TableRow key={id}>
        {/* 选择框列 */}
        <TableCell padding="none">
          <Checkbox
            disabled={false}
            checked={selected}
            onClick={event => onToggleItem(id, event)}
          />
        </TableCell>
        {/* 展开按钮列 */}
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => onToggleExpand(id)} // 调用切换方法
          >
            {/* 根据展开状态切换图标 */}
            {expanded ? <ArrowUpward /> : <ArrowDownward />}
          </IconButton>
        </TableCell>
        {/* 字段列 */}
        {React.Children.map(children, field => (
          <TableCell key={`${id}-${field.props.source}`}>
            {React.cloneElement(field, {
              record,
              basePath,
              resource,
            })}
          </TableCell>
        ))}
      </TableRow>
      {/* 展开行：仅当expanded为true时显示 */}
      {expanded && (
        <TableRow>
          <TableCell colSpan={columnCount} style={{ padding: 0 }}>
            {/* 这里放你要展示的展开内容，比如详情表单、关联数据等 */}
            <div style={{ padding: '16px' }}>
              <p>展开内容：{record.name} 的详细信息</p>
              {/* 可以添加更多自定义内容，比如调用其他组件展示详情 */}
            </div>
          </TableCell>
        </TableRow>
      )}
    </>
  );
};

2. 修正DatagridBody的使用 #

不需要手动给MyDatagridRow传递所有props，DatagridBody会自动把展开相关的状态和方法传递给行组件，所以修改MyDatagridBody：

const MyDatagridBody = props => <DatagridBody {...props} row={<MyDatagridRow />} />;

3. 在List中使用自定义Datagrid #

确保你的List组件中使用自定义的Datagrid，指定body为MyDatagridBody，header为DatagridHeader：

const MyList = props => (
  <List {...props}>
    <Datagrid 
      body={<MyDatagridBody />} 
      header={<DatagridHeader />}
      // 其他Datagrid属性，比如rowClick等
    >
      {/* 你的字段组件，比如TextField、NumberField等 */}
      <TextField source="id" label="ID" />
      <TextField source="name" label="名称" />
      {/* 更多字段... */}
    </Datagrid>
  </List>
);

关键说明 #

• onToggleExpand是React-Admin的DatagridBody提供的方法，调用时传入行ID即可切换对应行的展开状态。
• expanded是当前行的展开状态，用于控制展开内容的显示/隐藏以及图标的切换。
• 展开行的colSpan需要设置为总列数，确保内容能跨所有列显示。

内容的提问来源于stack exchange，提问作者Hüseyin Z.