React Portal 任意門

photo by @pawel_czerwinski

Portal為插槽功能，可以將子元件渲染到父元件以外的地方，聽起來很炫，概念感覺有點像任意門？render一個component時，其實改變的是另一個地方的DOM，通常會用到的情境是要跳脫父元件的限制，像是z-index、overflow:hidden等等。

比如你的root元件裡有三個component，header、content、 footer，但是彈窗組件是位在content，那麼彈窗顯示的時候，要怎樣才能覆蓋滿版的畫面？用css硬幹或許行得通，但絕對不是好方法

ReacDom.createPortal(child, container)

• child是要插入的React Dom ，ex. jsx等等
• container是要插入的位置，已經存在的DOM 元素

以下面的例子來說<div>you make me feel special</div>就是child，container就是在最外層id為root的DOM

簡單的彈窗範例

在<PopUp></PopUp>之間帶入彈窗的內容

PopUp component 透過this.props.children拿到外部傳入的彈窗內容

Portal 的事件冒泡 (Event Bubbling)

點擊了portal，同時也會將事件往上傳，所以點擊了modal也會觸發open function

<div onClick={this.open}>
   <modal>du du du </modal>
<div>

以上就是關於React Portal的簡單介紹