React全局浮窗对话框

Posted 2020-11-28 oldz

下面代码是组件源码：

import React, {Component} from ‘react‘
import {createPortal} from ‘react-dom‘
import styles from ‘./modal.css‘

export default class Modal extends Component {


    constructor(props) {
        super(props)

        const doc = window.document
        this.node = doc.createElement(‘div‘)
        doc.body.appendChild(this.node)

        this.state = {visible: this.props.visible}
    }


    componentWillReceiveProps(nextProps) {
        if (this.props.visible !== nextProps.visible) {
            this.setState({visible: nextProps.visible})
        }
    }

    componentWillUnmount() {
        if (this.node) {
            window.document.body.removeChild(this.node)
        }
    }

    render() {
        return createPortal(
            this.state.visible &&
            <div className={styles.modal}>
                <div className={styles.mask}/>
                <div className={styles.content}>

                </div>
            </div>, this.node
        )
    }
}

下面是组件所用的CSS：

/*@import ‘../_css/config‘;*/

.modal {
    position: fixed;
    display: flex;
    align-items: center;        /*竖直居中 垂直居中*/
    justify-content: center;    /*水平居中*/
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
}

.mask {
    background-color: rgba(0, 0, 0, .2);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
}

.content{
    position: fixed;
    width: 500px;
    height: 300px;
    background: #ffffff;
    z-index: 1000;
    border-radius:5px;

}

下面是如何使用:

import Modal from "../dialog/modal.jsx";

class MenuBar extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            isShowing: false
        }
    }
    render() {
    return (<div className={styles.userP} onClick={this.cloudFileBtnClick}>
                 <Modal visible={this.state.isShowing}/>
            </div>
　　)
}