React传送门Portals使用

​​Portals​​​可以渲染到父节点​​root​​​之外的节点上
类似​​​vue​​​的​​teleport​​

第一个参数布局元素，第二个参数是指定渲染到的Dom节点。

import React, { Component } from 'react';
import { createPortal } from 'react-dom'
const doc = window.document //或者可以指定index.html里的元素,参照官方文档
class Portals extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.elem = doc.createElement('div')
    }
    componentDidMount() {
        doc.body.appendChild(this.elem)
    }
    componentWillUnmount() {
        doc.body.removeChild(this.elem);
    }
    render() {
        return createPortal(
            <div>Portals传送门</div>, this.elem
        );
    }
}

export default Portals;