reactjs - React-Admin：在列表中显示之前映射资源数据

Question

我想在向用户展示它们之前对从 API 返回的元素执行额外的操作。例如，我有一个 0 或 1 的枚举字段，我想显示一些字符串而不是原始值。

const List = (props: any) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="name" />
      <TextField source="type" />
      <TextField source="value" />
    </Datagrid>
  </List>
);

类型列是 0 或 1，我想向用户显示一个字符串。<List>在将组件获取的数据传递给我之前，如何映射它<DataGrid>？

标签： reactjsreact-admin

Answer 1

const YourChoices = [
    {id: 0, name: 'One'},
    {id: 1, name: 'Two'},
];

const YourTypeInput = (props) => {
    return (
        <SelectInput {...props} choices={YourChoices}/>
    );
};


const List = (props: any) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="name" />
      <TextField source="type" />
      <TextField source="value" />
      <YourTypeInput label="Type" source="xxxxxxx.yyyyyyyy"/>
    </Datagrid>
  </List>
);