react Portal實現傳送門（可以把組件掛載到任意節點上）

react Portal實現傳送門（可以把組件掛載到任意節點上）

流程圖

react Portal

Portals 提供了一個最好的在父組件包含的DOM結構層級外的DOM節點渲染組件的方法

ReactDOM.createPortal(child,container);

第一個參數child是可渲染的react子項，container是需要掛載到dom元素

使用方法

第一步： 引入createPortal 在react-dom中

import {createPortal} from 'react-dom'

第二步：在constructor定義參數container 就是this.node

利用window.document 記錄doc參數 = > 定義this.node 創建div節點=>利用constructor當前的body下掛載在一個div節點上

constructor(props){
   super(props)
  //  記錄參數 利用window.document
  const doc =  window.document
  // 定義this.node 創建一個div節點
  this.node = doc.createElement("div")
  // 當前的body下掛載一個div節點
  doc.body.appendChild(this.node)
 }

第三步： 利用createPortal( )方法傳遞兩個參數

render() {
    // 實現createPortal
    return createPortal(
      <div className='dialog'>
        <h3>
          Modal
        </h3> 

      </div>, this.node
    )
  }

第四步：在componetWillUnmout取消綁定，不然會造成重複渲染

 // 在willUnmount中實現訂閱和取消訂閱
 componentWillUnmount () {
   // 刪除this.node
   window.document.body.removeChild(this.node)
 }