React-admin自定义组件内ReferenceField标签不显示问题求助

你封装的CustomField丢失默认label和排序行为，主要是两个原因：

1. React-admin的字段组件（如ReferenceField）在Datagrid中渲染表头、处理排序时，会读取组件的默认属性元数据，而你的自定义组件没有显式设置defaultProps，导致框架无法识别默认的label和sortBy。
2. 虽然你在ReferenceField上写了默认label，但props传递顺序和框架内部的props解析逻辑可能导致默认值未被正确读取。

修改CustomField组件，显式设置默认属性，并确保props传递逻辑正确：

import { ReferenceFieldProps, useRecordContext } from 'react-admin';
import { TextField } from '@mui/material';

// 定义类型，固定source和reference，避免用户传入冲突值
type CustomFieldProps = Omit<ReferenceFieldProps, 'source' | 'reference' | 'children'>;

const CustomField = (props: CustomFieldProps) => {
  const record = useRecordContext();

  return (
    <ReferenceField
      record={record}
      source="someId"
      reference="table"
      link="show"
      {...props}
      // 确保label默认值生效，用户传入的会覆盖默认
      label={props.label ?? 'some label'}
      // 显式设置默认排序字段，和source保持一致
      sortBy={props.sortBy ?? 'someId'}
    >
      <TextField source="name" />
    </ReferenceField>
  );
};

// 设置组件默认props，让React-admin能识别默认配置
CustomField.defaultProps = {
  label: 'some label',
  sortBy: 'someId',
};

export default CustomField;

• 类型约束：通过Omit排除source和reference，避免用户传入与封装逻辑冲突的值，保证组件行为一致。
• 默认属性：defaultProps是React-admin识别字段默认配置的关键，框架会读取这些值生成表头和排序规则。
• props优先级：通过props.label ?? defaultLabel确保用户传入的属性优先于默认值，同时保留默认行为。

这样修改后，直接使用<CustomField/>时，默认label会正常显示，排序功能也会自动绑定到someId字段，无需手动传入这两个属性。

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