如何在react-admin中控制ChipField的显示文本？

你说得对，ChipField的source属性确实只支持传入字段名称字符串，没法像SelectInput的optionText那样直接传自定义组件或函数——这也是很多刚用React Admin的开发者会踩的小坑。不过我们换个思路就能轻松解决，核心是利用SingleFieldList会把每条记录（record）传递给子组件的特性，自己封装一个自定义的Chip组件就行。

方案一：自定义Chip组件（最直接） #

既然ChipField本质上是对Material UI Chip组件的封装，那我们直接用MUI的Chip来实现自己的需求就好：

// 先导入Material UI的Chip组件
import { Chip } from '@mui/material';

// 自定义一个接收record属性的Chip组件
const SubstanceChip = ({ record }) => {
  // 做个简单的空值判断，避免渲染出错
  if (!record?.name) return null;
  
  // 组合需要显示的文本内容
  const chipLabel = `${record.name} (${record.unit || ''})`;
  
  return <Chip label={chipLabel} />;
};

// 然后在ReferenceArrayField里替换原来的ChipField
<ReferenceArrayField source="substances" reference="substances" label="Substanzen">
  <SingleFieldList>
    <SubstanceChip />
  </SingleFieldList>
</ReferenceArrayField>

方案二：结合FunctionField（如果想复用React Admin的字段逻辑） #

如果你想借助React Admin的FunctionField来处理记录，也可以这么写，效果是一样的：

import { FunctionField } from 'react-admin';
import { Chip } from '@mui/material';

<ReferenceArrayField source="substances" reference="substances" label="Substanzen">
  <SingleFieldList>
    <FunctionField
      render={record => {
        if (!record?.name) return null;
        const label = `${record.name} (${record.unit || ''})`;
        return <Chip label={label} />;
      }}
    />
  </SingleFieldList>
</ReferenceArrayField>

为什么这个思路可行？ #

SingleFieldList的作用就是遍历ReferenceArrayField返回的所有关联记录，把每一条record作为props传递给它的子组件。所以不管你是自定义组件还是用FunctionField，只要能接收并处理这个record，就能任意组合字段内容渲染Chip。

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