在 react-admin 中自定义显示表单

Question

我尝试使用 flexbox 创建自定义表单（布局）以在 react-admin 中显示视图，但我不知道从哪里开始。

对于创建和编辑视图，我们可以使用 'FormWithRedirect'，如 react-admin 文档中所述，以使用 flexbox 创建自定义视图： https://marmelab.com/react-admin/CreateEdit.html

    const VisitorForm = props => (
        <FormWithRedirect
            {...props}
            render={formProps => (
                // here starts the custom form layout
                <form>
                    <Box p="1em">
.....
                        <TextInput source="first_name" resource="customers" fullWidth />

当尝试使用 flexbox 元素呈现显示视图时，不会呈现 react-admin 组件。显示视图的等效方法是什么？如何在显示视图中使用 flexbox？

export const PostShow = (props) => (
    <Show {...props}>
        <SimpleShowLayout>
            <Box><TextField source="title" /></Box> // TextField is not rendered.

Answer 1

您应该创建一个替代的显示布局组件。它会收到一个 record 道具，其中包含从 dataProvider 获取的数据：

const MyShowLayout = ({ record }) => (
  <Box>
      // use record directly
      <Typography>{record.title}</Typography>
      // or use react-admin components by passing record 
      <TextField source="title" record={record} />
  </Box>
);

然后，在 PostShow 中使用您的自定义布局，如下所示：

const PostShow = props => (
    <Show {...props}>
        <MyShowLayout />
    </Show>
);

呈现时，<Show> 组件克隆其子组件并传递获取的 record。

在 react-admin 中自定义显示表单

custom show form in react-admin

reactjs

react-admin