react-admin 上 SimpleForm 组件中的自定义布局答案

【问题标题】：Custom layout in SimpleForm component on react-adminreact-admin 上 SimpleForm 组件中的自定义布局
【发布时间】：2019-04-16 03:26:31
【问题描述】：

我想在我的 react-admin 项目的 Edit 和 Show 页面上创建一个自定义的两列网格布局。我想只使用一个<SimpleForm>，在左列显示选择框和图像上传区域，在右列显示文本输入。

Simply like this

如果我在 <SimpleForm> 和 <EditController> 组件下使用 div 或 <Card> 组件，则会收到错误消息。

Warning: React does not recognize the `basePath` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom 
attribute, spell it as lowercase `basepath` instead. If you 
accidentally passed it from a parent component, remove it from the DOM 
element.

有没有什么方法可以创建没有这个错误的布局？

【问题讨论】：

首先看看你是怎么做的会很有用，这样我们就可以看到错误来自哪里。
react-admin 的相关 GitHub 问题：github.com/marmelab/react-admin/issues/…
这能回答你的问题吗？ How do I have more complex layouts in `react-admin` "Show" and "Edit" and "Create" screens?

标签： reactjs react-admin

【解决方案1】：

我通过使用 div、<Grid/> 等创建另一个组件解决了这个问题，并在 <SimpleForm> 组件中使用了该组件。

import {withStyles} from '@material-ui/core/styles';
import React from 'react';
import {
    EditController,
    SimpleForm,
    TextInput,
    SelectInput,
    Title,
} from 'react-admin';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import Poster from "../customField/Poster";
import {EditToolbar} from '../toolbar/CustomToolbar'
import {EditActions} from '../toolbar/CustomActions'

const editStyles = {
    root: {display: 'flex', alignItems: 'flex-start', width: '100%'},
    form: {flexGrow: 9},
};


class CardEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            refresh: false
        };
    }

    render() {
        const FormDiv = withStyles(editStyles)(({children, classes, ...props}) => {
                return (
                    <div className={classes.root}>
                        <div className={classes.form}>
                            <Grid container spacing={24}>
                                <Grid item xs={6}>
                                    <TextInput source="name" fullWidth />
                                </Grid>
                                <Grid item xs={6}>
                                    <TextInput source="card_id" fullWidth />
                                </Grid>
                            </Grid>
                        </div>
                        </div>
                )
            }
        )

        return (
        <EditController {...this.props}>
            {({resource, record, redirect, save, basePath, version}) => {
                return (
                <div>
                    <Title defaultTitle="sample"/>
                    <Card>
                        <div style={{ margin: '20px 20px 0 0' }}>
                            <EditActions
                                basePath={basePath}
                                resource={resource}
                                data={record}
                                hasShow
                                hasList
                            />
                        </div>
                        {record && (
                            <SimpleForm
                                basePath={basePath}
                                redirect={redirect}
                                resource={resource}
                                record={record}
                                save={save}
                                version={version}
                                toolbar={<EditToolbar/>}
                            >

                                <FormDiv record={record} />
                            </SimpleForm>
                        )}
                    </Card>
                </div>
            )
            }}
        </EditController>
        )
    }
}

export default withStyles(editStyles)(CardEdit);

【讨论】：

您能否发布有关您如何做到这一点的代码？我也对这个感兴趣。
@GreenMagic 我通过添加我的编辑页面代码来编辑我的评论，以供您参考。

【解决方案2】：

实际上，如果您不需要任何自定义样式等等，这可能会更容易一些。为了摆脱 basePath 错误，只需清理传递给 Material UI Grid 组件的道具：

const SanitizedGrid = ({basePath, ...props}) => {
  return (
    <Grid {...props} />
  );
};

然后用它代替普通的 Grid：

export default props => (
  <SimpleForm {...props}>
    <SanitizedGrid container spacing={16}>
        <Grid item xs>
            <TextInput source="name" />
        </Grid>
    </SanitizedGrid>
  </SimpleForm>
);

【讨论】：

如果乍一看并不明显，这里的关键是在定义“SanitizedGrid”时将“basePath”与其他“props”分开。这样，当您将 {...props} 传递给“Grid”组件时，“basePath”就不会出现。

【解决方案3】：

作为另一种方式，我刚刚制定了（感谢 Alexander 的回答）一种很好的通用方式，可以将任何自定义 HTML 内容添加到 react-admin 表单：

import React, { Fragment }      from 'react';
import { SimpleForm }           from 'react-admin';

const CustomContent = ({ basePath, record, resource, children }) => (
  <Fragment>
    {children}
  </Fragment>
);

export const MyForm = (props) => (
  <SimpleForm>
    <CustomContent>
      <h3>Custom Content</h3>
      <p>I can now add standard HTML to my react admin forms!</p>
    </customContent>
  </SimpleForm>
);

您获得了 basePath 道具（您可能不想要），但记录和资源道具可能对您的自定义内容有用（如果您将代码切换为使用渲染道具）

【讨论】：