如何解决react-admin
我尝试使用flexbox创建一个自定义表单(布局),以在react-admin中显示视图,我不知道从哪里开始。
对于Create和Edit视图,我们可以按照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元素渲染show视图时,则不会渲染react-admin组件。 显示视图的等效方法是什么?如何在展示视图中使用flexbox?
export const PostShow = (props) => (
<Show {...props}>
<SimpleShowLayout>
<Box><TextField source="title" /></Box> // TextField is not rendered.
解决方法
您应该创建一个替代的显示布局组件。它将收到一个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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。