React Bootstrap4 模态放置

Question

我有一个组件可以打开 bootstrap 模式（使用 react-bootstrap4-modal）

它使用这个打开和关闭

{this.state.inEditMode ? <MemberModal /> : null}

但是，由于该组件已经嵌套在 DOM 中的某处，因此它不是 bootstrap 模态标记的有效位置。它在底部留下了一个令人讨厌的白色条，我确认如果它位于最外面的 <App/> div 标签内就不会发生这种情况。

有没有简单的方法可以解决这个问题？或者它是否需要我将所有模态组件放在 <App/> 中并从嵌套子项中更改 <App/> 的状态？

Answer 1

这是一个z-index stacking issue and was a common problem until React introduced portals. Dan Abrimov from the FB team put together a code pen with an example that can be found here。

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

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. 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() {
  // 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:

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
  );
}

React Bootstrap4 模态放置

React Bootstrap4 modal placement

reactjs

bootstrap-4

react-bootstrap4-modal