React 创建对话框组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xutongbao/article/details/83029427

Dialog.js:

import React from 'react';
import ReactDOM from 'react-dom';
export default class Dialog {
    static modal(Component, zIndex) {
        let body = document.body;
        let showDom = document.createElement("div");
        showDom.classList.add('app-pop');
        showDom.id= 'm-pop';
        showDom.style.zIndex = zIndex || 999;
        body.appendChild(showDom);
        let close = () => {
            ReactDOM.unmountComponentAtNode(showDom);
            body.removeChild(showDom);
        }
        ReactDOM.render(
            <Component onClose={close} />,
            showDom
        );
    }
}

App.js

import React, { Component } from 'react';
import Dialog from './Dialog';

class DialogInner extends Component {
    componentDidMount() {
        document.getElementById('m-pop').addEventListener('click', e => {
            if (e.target && e.target.className.indexOf('app-pop-inner') >= 0) {
                return;
            }
            this.props.onClose();
        });
    }
    handleClose() {
        this.props.onClose();
    }
    render() {
        return (
            <div className="app-pop-inner">
                <button onClick={this.handleClose.bind(this)}>Close</button>
            </div>
        )
    }
}

class App extends Component {
    handleOpen() {
        Dialog.modal(DialogInner, 1);
    }
    render() {
        return (
            <div>
                <button onClick={this.handleOpen.bind(this)}>打开弹框</button>
            </div>
        );
    }
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

index.css:

.app-pop {position: fixed;width: 100%;top: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.3);overflow: auto;}  
.app-pop-inner {position:absolute;left:50%;top:50%;width: 328px;height:380px;border-radius: 6px;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);background: green;}