[英]how to render a modal inside root element in react?
I am building a react app with a modal containing a form.我正在构建一个包含表单的模式的反应应用程序。
The css for that form wasn't working correctly so when I did an inspect element I figured out that the modal is outside the ... root element and when I copy the modal element inside a specific child element inside the root with the class "container__wrap" the css of the form works correctly.该表单的 css 无法正常工作,因此当我执行检查元素时,我发现模态在 ... 根元素之外,当我将模态元素复制到根内的特定子元素内时container__wrap" 表单的 css 工作正常。
So... I want the modal to be inside the root element and more specifically inside a div with the class "container__wrap like in the second attached picture. this is the modal code所以......我希望模态在根元素内,更具体地说是在一个带有“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这是元素在根之外呈现的地方
Normally, React render components inside the root element.通常,React 在根元素内渲染组件。 I guess the Modal you're using is from a UI library.
我猜您使用的 Modal 来自 UI 库。 And it might apply something like react-portal to make the modal component outside the root element.
它可能会应用类似 react-portal 的东西来使模态组件位于根元素之外。 You can check the doc of that library see if they provide an extra prop to support render inside root element.
您可以查看该库的文档,看看它们是否提供了额外的道具来支持根元素内部的渲染。 Or you can create your own modal without using react-portal.
或者您可以在不使用 react-portal 的情况下创建自己的模态。
https://zh-hant.reactjs.org/docs/portals.html https://zh-hant.reactjs.org/docs/portals.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.