react-admin中自定义字段组件如何添加label

Question

So I have created a custom field for react admin which looks something like this:

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;

And using it like this:

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

The react-admin documentation claims that

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

What am I missing then?

Answer 1

You need to use the <Labeled> component as shown here:

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

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

Answer 2

Ok so it turned out to be quite simple by adding the "label" property on the custom field:

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;

And in the datagrid:

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