Пользовательский макет в компоненте SimpleForm в react-admin

Я хочу создать настраиваемый макет сетки из двух столбцов в моем проекте response-admin на страницах Edit и Show. Я хочу отображать поля выбора и область загрузки изображений в левом столбце, а текстовые поля - в правом столбце, используя только один <SimpleForm>.

Просто так

Если я использую компонент div или <Card> под компонентами <SimpleForm> и <EditController>, я получаю сообщение об ошибке.

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.

Есть ли способ создать макет без этой ошибки?


reactjs react-admin
person selens    schedule 13.11.2018    source источник
comment
Было бы полезно сначала посмотреть, как у вас дела, чтобы мы могли понять, откуда взялась ошибка.   -  person Green Magic    schedule 17.12.2018
comment
Связанная проблема GitHub для react-admin: github.com/marmelab/ реагировать-админ / вопросы /   -  person William    schedule 15.11.2019
comment
Отвечает ли это на ваш вопрос? Как сделать У меня есть более сложные макеты на экранах `response-admin` Показать, изменить и создать?   -  person Kia Kaha    schedule 26.09.2020

Ответы (3)


arrow_upward
4
arrow_downward

Я решил это, создав еще один компонент с использованием 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);
person selens    schedule 15.11.2018
comment
Не могли бы вы опубликовать код о том, как вы это сделали? Меня это тоже интересует. - person Green Magic; 17.12.2018
comment
@GreenMagic Я отредактировал свой комментарий, добавив свой код страницы редактирования, чтобы вы могли ссылаться на него. - person selens; 20.12.2018

arrow_upward
2
arrow_downward

На самом деле, это можно было бы сделать немного проще, если вам не нужны какие-либо пользовательские стили и тому подобное. Чтобы избавиться от ошибки basePath, просто продезинфицируйте реквизиты, переданные в компонент Material UI Grid:

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

Затем используйте его вместо обычной сетки:

export default props => (
  <SimpleForm {...props}>
    <SanitizedGrid container spacing={16}>
        <Grid item xs>
            <TextInput source="name" />
        </Grid>
    </SanitizedGrid>
  </SimpleForm>
);
person Alexander Mayatsky    schedule 28.06.2019
comment
Если на первый взгляд это не было очевидным, ключевым моментом здесь является то, что вы отделяете basePath от других свойств при определении SanitizedGrid. Таким образом, когда вы передаете {... props} компоненту Grid, basePath не появляется. - person William; 15.11.2019

arrow_upward
0
arrow_downward

В качестве другого способа я только что разработал (благодаря ответу Александра) хороший общий способ добавления любого настраиваемого HTML-содержимого в форму реагирования-администратора:

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 (которая, вероятно, вам не нужна), но реквизиты записи и ресурса могут быть полезны для вашего пользовательского контента (если вы переключите код на использование опоры рендеринга)

person Andy Lorenz    schedule 04.12.2020