reactjs - 将 "Row Number"添加到 react-admin Datagrid 中的列表组件

Question

我的 id 主键字段类型是 UUID，我想向我的 <Datagrid /> 添加一个人性化的行号成分。我们如何做到这一点？我看到我们可以像这样创建自定义组件:

https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component

也许我们可以创建新的字段类型，例如 <RowNumber />但是当我看到上面的链接时，它似乎只有 source和 record .

我们怎样才能得到index我的自定义字段中的行数？

Answer 1

我遇到了同样的问题，用这种方法解决了。

首先，我创建了一个 DataGridWithIndex 组件，它与 original DataGrid 具有相同的签名。

import React, { FC, useMemo } from 'react';
import { DatagridProps, useListContext, useRecordContext, Datagrid } from 'react-admin';

export const CurrentIndexField = (props: any) => {
  const record = useRecordContext(props);
  return record && record.__index__ !== undefined ? <span>{record.__index__} </span> : <span></span>;
};

export const DataGridWithIndex: FC<DatagridProps> = React.forwardRef((props, ref) => {
  const { children, ...rest } = props;
  const { data: rawData } = useListContext();
  const data = useMemo(() => rawData?.map((dt, index) => ({ ...dt, __index__: index + 1 /* make it 1-based */ })) || [], [rawData]);
  return (
    <Datagrid {...rest} ref={ref} data={data}>
      <CurrentIndexField />
      {children}
    </Datagrid>
  );
});

现在我们有了它，我们可以使用:

 ...
    <List /* whatever params here */>
      <DataGridWithIndex /* whatever params here */>
          <TextField source="title" />
          ...
      </DataGridWithIndex>
    </List>

请注意，索引是每页的:如果您分页并位于第 4 页(例如)，即页面的第一行，索引 = 1(而不是 41)。这符合我的要求。