Question

这是问题所在：我有一个ModalBaseComponentLayout，每次调用ModalBaseComponentLayout时都想发生什么，我希望它始终在父级上呈现。

比方说，发生了什么事

<div id="root">
     <div class="ONE modal fade in">
         <div class="modal-header"></div>
         <div class="modal-content">
               <div class="TWO modal fade in">
                   <div class="modal-header"></div>
                   <div class="modal-content"></div>
                   <div class="modal-footer"></div>
               </div>
         </div>
         <div class="modal-footer"></div>
     </div>
</div>

我想发生的是

<div id="root">
     <div class="ONE modal fade in">
         <div class="modal-header"></div>
         <div class="modal-content">
         </div>
         <div class="modal-footer"></div>
     </div>
     <div class="TWO modal fade in">
         div class="modal-header"></div>
         <div class="modal-content"></div>
         <div class="modal-footer"></div>
     </div>
</div>

所以基本上我想发生的是在根节点而不是模态的子节点上渲染模态组件。

Answer 1

看看React Portal：https://reactjs.org/docs/portals.html

基本上是这样：

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组件

1 个答案: