如何在反应的根元素内部渲染模态？

Question

我正在使用包含表单的模式构建一个React应用。

该表单的css无法正常工作，因此当我执行检查元素时，我发现模态位于...根元素之外，并且当我将模态元素复制到根内的特定子元素内时，类“ container__wrap”表单的CSS正常工作。

所以...我希望模态位于根元素内，更具体地说是在具有类“ container__wrap”的div内，如第二幅图片所示。这是模态代码

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渲染根元素内的组件。我想您正在使用的Modal来自UI库。而且它可能会应用诸如react-portal之类的方法来使模态组件位于根元素之外。您可以检查该库的文档，看看它们是否提供了额外的支持来支持root元素内部的渲染。或者，您也可以不使用react-portal来创建自己的模态。

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