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

Question

I try to create a customized form (Layout) with flexbox for a show view in react-admin and I don't know where to start.

For the Create and Edit view we can use 'FormWithRedirect' as explained in the react-admin docu to create a custom view for example with 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 />

When trying to render the show view with flexbox elements, then the react-admin components are not rendered. What is the equivalent approach for a show-view? How can I use flexbox in a show-view?

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

Answer 1

You should create an alternative show layout component. It'll receive a record prop, which contains the data fetched from the 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>
);

Then, use your custom layout in the PostShow, as follows:

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

When rendering, the <Show> component clones its child and passes the fetched record .