React-admin：如何重命名DatagridConfigurable的“未标记列#N”？

我按照react-admin的相关文档使用<DatagridConfigurable>时，添加了一个包含操作按钮的div列，代码如下：

<DatagridConfigurable>
  <TextField source="id" />
  <TextField source="title" />
  <TextField source="author" />
  <TextField source="year" />
  <div> 
    // This column contains action buttons
  </div>
</DatagridConfigurable>

但这个操作列显示为“Unlabeled Column #4”，我尝试给div添加label和name属性都无效。此外我的应用里有多个带自定义列的<DatagridConfigurable>，大量“Unlabeled Column #N”的显示体验很差，请问如何解决？

• <DatagridConfigurable>只会自动识别react-admin内置的字段组件（如<TextField>、<FunctionField>等）的label属性来生成列名
• 普通的<div>不是官方字段组件，组件内部没有暴露让<DatagridConfigurable>识别的标识信息，所以会自动生成默认的“Unlabeled Column #N”名称

方法一：使用官方<FunctionField>组件替换div #

<FunctionField>是react-admin提供的自定义字段组件，支持label属性，能被<DatagridConfigurable>正确识别：

<DatagridConfigurable>
  <TextField source="id" />
  <TextField source="title" />
  <TextField source="author" />
  <TextField source="year" />
  <FunctionField label="操作" render={record => (
    <div> 
      {/* 这里放置你的操作按钮，比如编辑、删除按钮 */}
      <EditButton record={record} />
      <DeleteButton record={record} />
    </div>
  )} />
</DatagridConfigurable>

方法二：封装自定义列组件 #

如果需要自定义容器结构，可以自己封装一个带label属性的组件，让<DatagridConfigurable>能读取到列名：

// 封装自定义操作列组件
const ActionColumn = ({ label, children }) => {
  return <div>{children}</div>;
};

// 在Datagrid中使用
<DatagridConfigurable>
  <TextField source="id" />
  <TextField source="title" />
  <TextField source="author" />
  <TextField source="year" />
  <ActionColumn label="操作">
    {/* 操作按钮内容 */}
    <EditButton />
    <DeleteButton />
  </ActionColumn>
</DatagridConfigurable>

通过以上两种方式，都可以让自定义列显示你设置的名称，避免出现默认的“Unlabeled Column #N”。

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