React-Protal(传送门)

最新推荐文章于 2024-08-08 11:30:14 发布

麦子的小库存

最新推荐文章于 2024-08-08 11:30:14 发布

阅读量601

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/qq_36162529/article/details/102682926

版权

react 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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

export default class Dialog extends Component {
    constructor(props) {
        super(props);
        const doc = window.document;
        this.node = doc.createElement('div');
        doc.body.appendChild(this.node);
    }
    componentWillUnmont(){
        window.document.body.removeChild(this.node);
    }
    render(){
        const { hideDialog } = this.props;
        return createPortal(
            <div>
                {this.props.children}
                {typeof hideDialog === 'function' && (
                    <button onClick={ hideDialog }>关闭</button>
                    )
            </div>, this.node
        )
    }
}