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

//传送门，将dom渲染到body节点
class OldPortal extends Component {
    constructor(props) {
        super(props)
    }

    componentWillReceiveProps(props) {
        if(props.visible) {
            this.renderPortal((props))
        } else {
            this.closePortal()
        }
    }

    componentDidMount() {
        const { visible } = this.props;
        if (visible) {
            this.renderPortal(this.props);
        }
    }

    renderPortal(props) {
        if (!this.node) {
            //防止多次创建node
            this.node = document.createElement('div');
        }
        //将当前node添加到body中
        document.body.appendChild(this.node);

        ReactDOM.unstable_renderSubtreeIntoContainer(
            this,   // 上下文指定当前的实例
            props.children,   // 渲染的元素为当前的children
            this.node   // 将元素渲染到我们新建的node中,这里我们不使用第四个参数回调.
        )
    }

    closePortal() {
        if (this.node) {
            // 卸载元素中的组件
            ReactDOM.unmountComponentAtNode(this.node)
            // 移除元素
            document.body.removeChild(this.node)
        }
    }

    render() {
        return null
    }
}

export default OldPortal;
