iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
自我挑戰組

React初心者30天的探索之路系列 第 25

[Day 25] React Portal 任意門

  • 分享至 

  • xImage
  •  

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的簡單介紹


上一篇
[Day 24] React Router- 指路者
下一篇
[Day 26] React memory leak - 記憶體洩漏
系列文
React初心者30天的探索之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言