如何设置TextField/RichTextField的maxLenght及<Datagrid>内容截断？

我之前也碰到过类似的困扰，React Admin的Datagrid确实没有直接提供多行截断的配置项，不过咱们可以通过自定义字段组件来搞定，同时也能轻松设置输入框的maxLength，下面一步步来操作：

1. 先搞定表单中的maxLength限制 #

不管是TextField还是RichTextField，直接给组件加上原生的maxLength属性就可以限制用户输入的字符数，非常简单：

表单示例： #

// 普通TextField限制输入200字符
<TextField source="description" label="描述" maxLength={200} />

// RichTextField限制输入500字符（基础场景下直接生效，部分富文本编辑器可能需要额外适配，但大部分情况没问题）
<RichTextField source="message" label="消息" maxLength={500} />

2. 实现Datagrid中的文本多行截断 #

Datagrid里的默认TextField是单行展示的，要实现多行截断，我们可以自定义一个字段组件，借助Material UI的Typography组件的maxLines和截断属性来控制：

步骤1：创建自定义截断字段组件 #

import { Typography, useRecordContext } from 'react-admin';

// 自定义截断字段，默认最多显示2行，可通过props修改
const TruncatedTextField = ({ source, maxLines = 2, ...props }) => {
    const record = useRecordContext();
    // 获取当前行的文本内容，为空时显示空字符串
    const textContent = record?.[source] || '';

    return (
        <Typography 
            variant="body2" 
            maxLines={maxLines} 
            overflow="hidden" 
            textOverflow="ellipsis"
            {...props}
        >
            {textContent}
        </Typography>
    );
};

步骤2：在Datagrid中使用这个自定义组件 #

import { Datagrid, List, TextField } from 'react-admin';
import TruncatedTextField from './TruncatedTextField';

export const MyRecordList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            {/* 用自定义组件展示截断的描述，最多显示2行 */}
            <TruncatedTextField source="description" label="描述" maxLines={2} />
            <TextField source="title" />
            {/* 其他字段... */}
        </Datagrid>
    </List>
);

3. 详情页展示完整内容 #

在详情页（Show组件）里，直接使用默认的TextField或RichTextField就能显示完整的文本内容，不需要额外配置：

import { Show, SimpleShowLayout, TextField, RichTextField } from 'react-admin';

export const MyRecordShow = () => (
    <Show>
        <SimpleShowLayout>
            <TextField source="id" />
            <TextField source="description" label="完整描述" />
            <RichTextField source="message" label="完整消息" />
            {/* 其他字段... */}
        </SimpleShowLayout>
    </Show>
);

为什么你之前的配置没生效？ #

你尝试的options={{ multiLine: true, maxLength: "2" }}其实是针对部分表单组件的配置逻辑，但Datagrid里的TextField并不识别这个options参数。咱们上面的自定义组件直接基于Material UI的Typography组件，能精准控制行数和截断效果，完全适配Datagrid的场景。

内容的提问来源于stack exchange，提问作者Clarissa D. Pereira