如何在 react-admin 中为自定义字段组件添加标签答案

【问题标题】：How to add label to custom field component in react-admin如何在 react-admin 中为自定义字段组件添加标签
【发布时间】：2022-10-04 16:32:40
【问题描述】：

所以我为 react admin 创建了一个自定义字段，如下所示：

import * as React from "react";
import { useRecordContext } from "react-admin";


export const IsOnline = (props:{view:string}) => {
    const record = useRecordContext();
    
    if (record.is_online)
        return <span className={props.view}>{("Online")}</span>;

    return <span className={props.view}>{("Offline")}</span>;
};
export default IsOnline;

并像这样使用它：

import IsOnline from "./IsOnline.field";
<Datagrid hover={false} rowClick="edit">
(...)
<IsOnline view="list"/> // <-- Here I would normally add the "label" prop
</Datagrid>
(...)

react-admin 文档声称

Tip: Note that the label property can be used on any field to customize the field label.

那我错过了什么？

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

您需要使用<Labeled> 组件，如下所示：

https://marmelab.com/react-admin/Fields.html#setting-a-field-label

https://marmelab.com/react-admin/Labeled.html

【讨论】：

这会为列添加标签，但也会在每条记录周围添加标签:(

【解决方案2】：

好的，通过在自定义字段上添加“标签”属性，结果变得非常简单：

import * as React from "react";
import { useRecordContext } from "react-admin";


export const IsOnline = (props:{view:string, label:string}) => {
    const record = useRecordContext();

    if (record.is_online)
        return <span className={props.view}>{("Online")}</span>;

    return <span className={props.view}>{("Offline")}</span>;
};
export default IsOnline;

在数据网格中：

<IsOnline view="list" label="Status"/>

【讨论】：