React入门9-弹窗组件

react 中 可以通过 react-dom中的 createPortal来定义传送门。

import React, { Component } from 'react'
import {createPortal} from 'react-dom'
import {Button} from 'antd'
import '../assets/dialog.css'

export default class Dialog extends Component {
    constructor (props) {
        super(props)
        this.node = document.createElement('div')
        document.body.appendChild(this.node)
    }
    render() {
        return (
            // 参数1: jsx; 参数2：挂载的节点
            createPortal(<div className='dialogBg'>
                <div className='dialog'>
                    {this.props.children}
                    <div>
                        <Button>取消</Button>
                        <Button>确定</Button>
                    </div>
                </div>
            </div>, this.node)
        )
    }

    componentWillUnmount() {
        document.body.remove(this.node)
    }
}