reactjs - 始终在根节点上渲染 React 组件

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>

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

标签： reactjs

Answer 1

看看 React 门户：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
  );
}