【React.js】Portals

Portals

• 组件默认会按照既定层级嵌套渲染
• 如何让组件渲染到父组件外？

使用场景

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

代码案例

import React from 'react'
import ReactDOM from 'react-dom'
import './style.css'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    render() {
        // 正常渲染
        return <div className="modal">
            {this.props.children} {/* vue slot */}
        </div>

        // 使用 Portals 渲染到 body 上。
        // fixed 元素要放在 body 上，有更好的浏览器兼容性。
        return ReactDOM.createPortal(
            <div className="modal">{this.props.children}</div>,
            document.body // DOM 节点
        )
    }
}

export default App

style.css

.modal {
    position: fixed;
    width: 300px;
    height: 100px;
    top: 100px;
    left: 50%;
    margin-left: -150px;
    background-color: #000;
    /* opacity: .2; */
    color: #fff;
    text-align: center;
}