Protal是甚麼?
Protal的功能是可以將子元件(child)render到父元件(parent)DOM以外的地方
Protal的寫法是甚麼?
ReactDOM.createPortal(child, container)
從react官網上面我們可以看到他們提供的protal寫法

1. child所代表的是你可以輸入任何你想要渲染的東西，就好比說element，字串，或者是fragment。
2. container所代表的則是要插入的位置，DOM元素。

Portal 的 Event Bubbling
protal 除了可以放在dom的任何位置，其他的功能都與child的功能差不多，畢竟不論protal能做到多少事，他們身為child ，都是存在於react樹中。而Event Bubbling也不例外，它的功能在於一個event 在protal 內被觸發後會傳送react tree到parent中，就算涵蓋它的那些 element 並不是 DOM tree 上的祖先。但是有個小缺點，就是Portal是單向的，內容通過Portal傳到另一個出口，另一端並不會Bubbling回去。

<div onClick={onDialogClick}>   
   <Dialog>
     What ever you want to type
   </Dialog>
</div>

也就是說，這樣的程式在被執行之後，在Dialog的內容上點擊，onDialogClick是不會被觸發的。

使用protal時需要注意

• Event Bubbling通過將event傳到 React 樹祖先來照順序工作，無論 DOM 中的 Portal 節點位置怎麼排列。
• React 可以控制 Portal 節點及其生命週期——當通過 Portal 渲染子元素時，React 仍然可以控制它們的生命週期。
• React 可以控制 Portal 節點及其生命週期——當通過 Portal 渲染子元素時，React 仍然可以控制它們的生命週期。
• protal 只影響 DOM 結構——protal只影響 HTML DOM 結構，不影響 React component tree。
• 使用 Portal 時，需要定義一個 HTML DOM 元素作為 Portal 組件的掛載點。

參考連結:
https://zh-hant.reactjs.org/docs/portals.html
https://blog.bitsrc.io/understanding-react-portals-ab79827732c7
https://zhuanlan.zhihu.com/p/29880992