javascript - 如何在反应中渲染根元素内的模态？

Question

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

该表单的 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>
    )
};

这是元素在根之外呈现的位置

这是模态应该所在的层次结构

标签： javascriptreactjsreactstrap

Answer 1

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

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