Portal 提供一個優秀方法來讓 children 可以 render 到 parent component DOM 樹以外的 DOM 節點。

• 第一個參數（myComponent）是任何可 render 的 React child，例如 element、string 或者 fragment。
• 第二個參數（elDOM）則是一個在 React 之外的 DOM element。

const elDOM = querySelector("#elementOutsideReact")
funciton () myComponent {

}
ReactDOM.createPortal(myComponent, elDOM)

一個 pop up 的實作：

Codepen 完整連結

透過 Portal 進行 Event Bubbling

在一般的例子可以將事件擺在 button 上，但有時候也會利用 Event buuble 擴大觸及點。
在 html 檔裡面寫的結構是 sibling 同一層的節點，但是可以抓的 bubble 的事件，因為 portal 之後節點還是在 React DOM tree 的結構裡面。

<div id="app-root"></div>
<div id="modal-root"></div>

render code 改寫：

return (
  <div className="App" onClick={this.togglePopup}> //掛在最外層
    <h1>Hello</h1>
    <TestLightBox>
      { this.state.showPopup ? <div className="lightBox">
        <div className="content">
          <h2>Start editing to see some magic happen!</h2>
          <button onClick={this.togglePopup}>關閉訊息</button>
        </div>
      </div> : ''}
    </TestLightBox>
    <button>顯示更多訊息</button>
  </div>
);

以上今天。

參考資料：
https://zh-hant.reactjs.org/docs/portals.html