【Day12】插槽 Portals

Portals 是一种让 children 可以 render 到
parent component DOM 树以外 DOM 节点的方法，
适合拿来做弹窗等许多地方都会用到的组件。

使用 Portal

ReactDOM.createPortal(child, container)

child 是任何可 render 的 React child
container 则是要挂载的 DOM element

createPortal 方法在 react-dom 而非 react 里面

React 不会建立一个新的 div，
而是把第一个引数的子元素
渲染到 container 中。

使用范例

import { createPortal } from 'react-dom'

const PortalsComponent = () =>{
    return createPortal(
        <div>我是一些文字</div>,
		document.getElementById('root')
    )
}

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

export default PortalsExample

弹窗范例

以下弹窗回传的是一个
createPortal 所产生的元素

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

在而任意地方使用 <PopUp>
都不会受到父元件的影响
而是会 render 在根元素（#root）底下。