iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

前端日常,每天 React 一下系列 第 13

【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)底下。

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

Portal 的事件冒泡(Event Bubbling)

不管某個 children component 是不是用 Portal 建立的
Parent component 都一樣可以捕捉
從底下元件 bubble 上來的 event


參考資料


上一篇
【Day11】表單:非受控元件 Uncontrolled Component
下一篇
【Day13】型別檢查 PropTypes
系列文
前端日常,每天 React 一下30

尚未有邦友留言

立即登入留言