如何在反应中呈现根元素内的模态？

Question

我正在构建一个带有包含表单的模态的 React 应用程序。

该表单的 css 无法正常工作，所以当我执行检查元素时，我发现模态元素位于 ... 根元素之外，当我将模态元素复制到特定元素中时具有 class "container__wrap" css 形式的根内的子元素可以正常工作。

所以...我希望模态框位于根元素内，更具体地说，位于 div 和 class "container__wrap 内，如第二张附图所示。这是模态代码

render() {
    const { modal, allDay } = this.state;
    //console.log(this.state);
    return (
        <Modal
            isOpen={modal}
            toggle={this.toggle}
        >
            <div className="modal__header">
                <button className="lnr lnr-cross modal__close-btn" type="button" onClick={this.toggle} />
            </div>
            <h3 className="page-title" style={{ color: '#2F9585' }} >Edit event</h3>
            <br />
            <br />
            <ModalBody>
                <form className="form form--horizontal" onSubmit={this.props.handleSubmit(this.onSubmit)}>
                    <div className="form__form-group" >
                        <span className="form__form-group-label">Title</span>
                        <div className="form__form-group-field">
                            <Field
                                name="title"
                                component="input"
                                type="text"
                                placeholder="Title of your event"

                            />
                        </div>
                    </div>
                    <div className="form__form-group">
                        <span className="form__form-group-label">start</span>
                        <div className="form__form-group-field">
                            <Field
                                name="start"
                                component={renderDateTimePickerField}
                                onChange={this.handleStartChange}
                                props={{ showTime: allDay }}

                            />
                            <div className="form__form-group-icon">
                                <TimetableIcon />
                            </div>
                        </div>
                    </div>
                    <div className="form__form-group">
                        <span className="form__form-group-label">end</span>
                        <div className="form__form-group-field">
                            <Field
                                name="end"
                                component={renderDateTimePickerField}
                                onChange={this.handleEndChange}
                                props={{ showTime: allDay }}
                            />
                            <div className="form__form-group-icon">
                                <TimetableIcon />
                            </div>
                        </div>
                    </div>
                    <div className="form__form-group">
                        <div className="form__form-group-field">
                            <Field
                                name="allDay"
                                component={renderCheckBoxField}
                                label="All day ?"
                                value={allDay}
                                onChange={this.handleAllDayChange}
                                className="colored"
                            />
                        </div>
                    </div>
                    <div className="form__form-group" >
                        <span className="form__form-group-label">description</span>
                        <div className="form__form-group-field">
                            <Field
                                name="description"
                                component="textarea"
                                type="text"
                                placeholder="description"
                            />
                        </div>
                    </div>
                    <ButtonToolbar className="form__button-toolbar">
                        <Button color='danger' onClick={this.delete}>delete</Button>{' '}
                        <Button onClick={this.toggle}>Cancel</Button>{' '}
                        <Button color="success" type="submit">update</Button>
                    </ButtonToolbar>
                </form>
            </ModalBody>
        </Modal>
    )
};

This is where the element is rendered outside the root

This is the hierarchy where the modal should be

Answer 1

通常，React 会在根元素内渲染组件。我猜您使用的模态框来自 UI 库。它可能会应用类似 react-portal 的东西来使模态组件位于根元素之外。您可以查看该库的文档，看看它们是否提供额外的道具来支持根元素内的渲染。或者你可以创建自己的模态而不使用 react-portal。

https://zh-hant.reactjs.org/docs/portals.html

如何在反应中呈现根元素内的模态？

how to render a modal inside root element in react?

javascript

reactjs

reactstrap