react-admin 中的自定义显示表单答案

【问题标题】：custom show form in react-adminreact-admin 中的自定义显示表单
【发布时间】：2020-10-14 10:21:41
【问题描述】：

我尝试为 react-admin 中的显示视图创建一个带有 flexbox 的自定义表单（布局），但我不知道从哪里开始。

对于创建和编辑视图，我们可以使用 react-admin 文档中解释的“FormWithRedirect”来创建自定义视图，例如使用 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.

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

您应该创建一个替代的显示布局组件。它会收到一个record prop，其中包含从 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。

【讨论】：