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

import { createPortal } from 'react-dom'
const PortalsComponent = () =>{
    return createPortal(
        <div>you make feel special</div>,document.getElementById('root')
    )
}

class PortalsExample extends Component{
    render(){
        return(
            <Fragment>
                <PortalsComponent />
            </Fragment>
        )
            
    }
}

export default PortalsExample

簡單的彈窗範例
在< PopUp> < /PopUp>之間帶入彈窗的內容

   <PopUp>
     我是彈窗內容
   </PopUp>

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

import React, { Component } from 'react';
import { createPortal } from 'react-dom'
import style from './style/modal.module.scss'

class PopUp extends Component {
    render(){
        return createPortal(
            <div className={style.modal}>
                {this.props.children}
            </div>,
            document.getElementById('root')
        )
    }
}

export default PopUp

Portal 的事件冒泡 (Event Bubbling)

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

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

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