import React, { Component } from 'react';
import ReactDOM from 'react-dom';

//传送门，将dom渲染到body节点
class NewPortal extends Component {
    constructor(props) {
        super(props)
        // 初始化创建渲染的父元素并添加到body下
        this.node = document.createElement('div');
    }

    componentDidMount() {
        document.body.appendChild(this.node);
    }

    componentWillUnmount() {
        document.body.removeChild(this.node);
    }
    render() {
        const { visible,children } = this.props;
        
        return visible && ReactDOM.createPortal(
            children,
            this.node
        )
    }
}

export default NewPortal;