react-Portals

react-Portals

---

将⼦节点渲染到存在于⽗组件以外的 DOM 节点

ReactDOM.createPortal(child, container)

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。 第二个参数（container）是一个 DOM 元素。

import React from 'react';
import ReactDOM from 'react-dom'

import './style.css'

class PortalsComponent extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        // return <>
        //     <div className='modal'>
        //         {this.props.children}
        //     </div>
        // </>
        // 渲染到body
        return ReactDOM.createPortal(
        <div className='modal'>
            {this.props.children}
        </div>,
        document.body
        )
    }
}

export const Portals = PortalsComponent

通过 Portal 进行事件冒泡

---

当子元素里的按钮被点击时， 这个将会被触发更新父元素的 state， 即使这个按钮在 DOM 中不是直接关联的后代

1.React中的事件是包装过的 2.它的事件冒泡是根据虚拟DOM树来冒泡，与真实的DOM树无关

使用场景

---

1. overflow: hidden
2. 父组件 z-index 值太小
3. fixed需要放在body第一层级