React-admin中ListGuesser如何将ID路径替换为标题显示？

当你使用FieldGuesser处理关联字段（比如mediaObjects）时，它默认会渲染成指向关联资源的链接并显示ID路径。要替换为显示关联对象的title字段，你需要手动使用ReferenceField结合TextField来实现，而非依赖FieldGuesser的自动猜测。

修改后的代码示例 #

import { ListGuesser, FieldGuesser, ReferenceField, TextField } from 'react-admin';

export const MediaAreasList = props => (
    <ListGuesser {...props}>
        <FieldGuesser label={labelLabel} source="label" />
        <FieldGuesser source="title" label={titleLabel} />
        <FieldGuesser source="description" />
        {/* 替换FieldGuesser为ReferenceField + TextField */}
        <ReferenceField 
            label={mediaObjectsLabel} 
            source="mediaObjects" 
            reference="media_objects" // 此处需匹配你的关联资源名称
        >
            <TextField source="title" /> {/* 指定显示关联对象的title字段 */}
        </ReferenceField>
    </ListGuesser>
);

关键说明 #

• ReferenceField用于建立当前资源与media_objects资源的关联，reference属性必须和你API中定义的关联资源名称保持一致。
• 嵌套在ReferenceField内的TextField，用于指定要显示关联对象的具体字段（这里为title）。
• 该组合会保留点击跳转至对应media_objects详情页的功能，同时显示标题而非ID路径。

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