React Admin中如何为ChipField按行记录条件配置对应图标

你遇到的报错是因为直接在IOList组件的渲染上下文里访问record变量，此时还没有进入Datagrid每行的渲染作用域，自然不存在record对象。React Admin提供了useRecordContext钩子专门用于在列表行/详情页的子组件中获取当前对应的数据记录。

实现步骤 #

1. 先导入依赖的钩子：

import { useRecordContext } from 'react-admin';

2. 封装自定义的带动态图标的TypeChip组件，把图标匹配逻辑放到组件内部：

const TypeChipField = (props) => {
  // 获取当前行的record数据
  const record = useRecordContext();
  if (!record) return null;

  const getTypeImage = (id) => {
    switch(id) {
      case "image": return <ImageIcon />;
      case "document": return <FormatColorTextIcon />;
      case "audio": return <AudiotrackIcon />;
      case "video": return <VideocamIcon />;
      case "location": return <LocationOnIcon />;
      default: return null;
    }
  }

  return <ChipField 
    source="type" 
    choices={choices} 
    icon={getTypeImage(record.type)}
    {...props}
  />
}

3. 在Datagrid中直接使用封装好的组件即可：

export const IOList = props => {   
  return(
    <List filters={IOFilters} {...props}>
      <Datagrid>
        <TextField source="id" />
        <TextField source="name" />
        <TypeChipField />
      </Datagrid>
    </List>
  );
};

可复用扩展方案 #

如果需要在多个场景下使用动态图标ChipField，可以封装通用组件：

const DynamicIconChipField = ({ source, getIcon, ...rest }) => {
  const record = useRecordContext();
  if (!record) return null;
  return <ChipField 
    source={source} 
    icon={getIcon(record[source])}
    {...rest}
  />
}

// 调用时直接传匹配规则即可
<DynamicIconChipField 
  source="type" 
  choices={choices}
  getIcon={(type) => {
    switch(type) {
      case "image": return <ImageIcon />;
      case "document": return <FormatColorTextIcon />;
      case "audio": return <AudiotrackIcon />;
      case "video": return <VideocamIcon />;
      case "location": return <LocationOnIcon />;
      default: return null;
    }
  }}
/>

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