React-admin: 我可以在<List>中截断<TextField>吗？

Question

是否有办法截断由 <TextField> 并显示 ...?

你看 标题 栏（我想把标题截断在20个字符之后）。

是否有一个特定的 prop? 不幸的是，我没有在react-admin文档中找到任何线索。

先谢谢你

Answer 1

实际上，你可以在 <List>, 而后得到 <Datagrid> 来渲染该字段，只要是迭代的。

const CustomTitleField = ({ record }) => {
  // "record" is a prop received from the Datagrid
  let str = record.title;
  return record ? (
    {/* If length is greater than 20 characters, slice and add ellipsis.*/}
    <span>{str.length > 20 ?  str.slice(0, 20) + "..." : str}</span>
  ) : null;
};

// Then, within your list, do this...
export const CommentList => (
  <List {...props}>
    <Datagrid>
      <CustomTitleField /> // this should render with your truncate logic
      // ...
    </Datagrid>
   </List>
);

试试这个之后，告诉我效果如何吧!