[英]React Bootstrap4 modal placement
I've got a component that opens a bootstrap modal (using react-bootstrap4-modal) 我有一个打开引导程序模式的组件(使用react-bootstrap4-modal)
It opens and closes using this 用这个打开和关闭
{this.state.inEditMode ? <MemberModal /> : null}
However, because the component is already nested somewhere in the DOM, it's not a valid placement for bootstrap modal markup. 但是,由于该组件已经嵌套在DOM中的某个位置,所以它不是引导模式标记的有效放置。 It leaves a nasty white bar at the bottom, which I confirmed does not happen if it's located within the outermost
<App/>
div
tag. 它在底部留下一个讨厌的白色条,我确认如果位于最外面的
<App/>
div
标签内,则不会发生。
Is there a simple way to fix this? 有简单的方法可以解决此问题吗? Or will it require me putting all of my modal components within
<App/>
and changing the state of <App/>
from within nested children? 还是会要求我把我所有的模态分量的内
<App/>
和改变的状态<App/>
套装在儿童中?
This is a z-index stacking issue and was a common problem until React introduced portals . 这是z-index堆叠问题,在React引入Portal之前一直是一个常见问题。 Dan Abrimov from the FB team put together a code pen with an example that can be found here .
从FB团队丹Abrimov放在一起码笔,可以发现一个例子这里 。
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
门户网站提供了一种一流的方式来将子级呈现到父组件的DOM层次结构之外的DOM节点中。
A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container.
门户的典型用例是父组件出现溢出:隐藏或z-index样式,但是您需要子组件以可视方式“脱离”其容器。 For example, dialogs , hovercards, and tooltips.
例如, 对话框 ,悬停卡和工具提示。
Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:
通常,当您从组件的render方法返回一个元素时,该元素将作为最接近的父节点的子元素安装到DOM中:
render() {
// React mounts a new div and renders the children into it
return (
<div>
{this.props.children}
</div>
);
}
However, sometimes it's useful to insert a child into a different location in the DOM:
但是,有时将子级插入DOM中的其他位置很有用:
render() {
// React does *not* create a new div. It renders the children into `domNode`.
// `domNode` is any valid DOM node, regardless of its location in the DOM.
return ReactDOM.createPortal(
this.props.children,
domNode
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.