Question

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

使用此

打开和关闭

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

但是，因为组件已经嵌套在DOM中的某个位置，所以它不是引导模式标记的有效位置。它在底部留下一个讨厌的白色条，如果它位于最外面的<App/> div标记内，我确认不会发生这种情况。

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

Answer 1

这是一个z-index stacking问题，在React介绍portals之前是一个常见问题。来自FB团队的Dan Abrimov将一个代码笔放在一起，可以找到here的例子。

门户提供了将子级渲染到DOM节点的第一类方法   存在于父组件的DOM层次结构之外。

门户网站的典型用例是父组件具有   溢出：隐藏或z-index样式，但您需要视觉上的孩子   “突破”其容器。例如，对话框，hovercards和   工具提示。

通常，当您从组件的render方法返回一个元素时，   它作为最近父节点的子节点挂载到DOM中：

render() {
  // React mounts a new div and renders the children into it
  return (
    <div>
      {this.props.children}
    </div>
  );
}

但是，有时将孩子插入不同的孩子会很有用 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模态放置

1 个答案: