react-admin 中的自定義顯示表單

Question

我嘗試為 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.

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 。