react的彈出層不同于以往的dom程式設計，我們知道，在dom中，彈出層事件綁定在對應的節點上即可，但是在react中，往往隻能實作父子之間的傳遞控制，顯然，彈出層的層級不符合此關系。
在這裡我們需要使用react官方的portals
portals可以幫助我們将子節點插入到父節點層級之外的地方
注：官方文檔使用的是class，我在這裡使用的是react hook
在react
react hook
<code>useeffect</code>是了react生命周期中的<code>componentdidmount</code>、<code>componentdidupdate</code>以及<code>componentwillunmount</code>三個鈎子函數的組合。
<code>useeffect</code>有兩個參數
<code>useeffect</code>第二個參數為空數組相當于在<code>componentdidmount</code>周期執行一次
<code>useeffect</code>第二個參數為含有某種state的數組相當于隻有在這個state發生改變的時候才執行
<code>useeffect</code>傳回一個函數相當于在<code>componentwillunmount</code>周期執行一次
1.首先，選擇要插入彈出層的dom節點，在這裡我參照官方文檔将整個項目分成了<code>app-root</code>和<code>model-root</code>兩層，我将把彈出層插入到<code>model-root</code>節點中
2.實作彈出層
我們按照官方文檔，先生成一個節點el作為存放我們子節點的容器，并執行<code>reactdom.createportal</code>
我們需要先将我們的el節點插入標明的dom節點，然後再将portal元素插入dom樹中，故我們先用hook在<code>componentdidmount</code>階段将el插入dom
（1）首先擷取我們要插入的dom節點id=model-root
（2）建立一個存放子節點的元素el
（3）在<code>componentdidmount</code>階段将el節點插入model-root
（4）渲染元件，執行createportal方法
（5）在<code>componentwillunmount</code>階段移除我們的el節點
完整代碼如下：
這樣子子元素就出現在了我們想要的dom層級中
3.在調用頁中引入我們的model并定義相關觸發事件，這些與子節點向父節點的方式傳值無異
