Protals 让组件渲染到父组件以外

1、为什么要用 Protals ？

一般情况下，组件默认会按照既定层次嵌套渲染。类似下面这样：

<div id="root">
    <div>
        <div>
            <div class="model">Modal内容</div>
        </div>
    </div>
</div>

大家可以看到，这样不断嵌套，但里面却只有一层区域的内容是有用的。从某种程度上来说，是非常不好的。那我们想做的事情是，如何让组件渲染到父组件以外呢？

这个时候就需要用到 Protals 。

2、使用

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;
}

 节点渲染效果

 结论：通过使用 ReactDOM.createPortal() ，来创建 Portals 。最终 modals 节点成功脱离开父组件，并渲染到组件外部。

3、使用场景

现在，我们来梳理一些 Protals 常见的场景。

protals 常用于解决一些 css 兼容性问题。通常使用场景有：

• overflow:hidden; 触发 bfc ；
• 父组件 z-index 值太小；
• position:fixed 需要放在 body 第一层级。