react之全局插件-询问框

用react实现一个全局询问框。

react跟vue的全局插件区别，vue可以在原型上面扩展，注册全局组件，注册后直接this调用；而react是没有的，即使是全局插件，在使用中也需要根据组件的需要程度，对插件先进行import，直接调用方法，不需要写入组件。

文件结构目录：

plugin
--ComfirmInfo
------index.js
------comfirmInfo.js
------comfirmInfo.css
------info.png  // 信息提示图标

下面是实现过程：
index.js

import React from 'react'
import ReactDOM from 'react-dom'
import ConfirmInfoDiolag from './ConfirmInfo'
import './ConfirmInfo.css'
function createNode(config) {
    const div = document.createElement('div')
    div.className="commonBox"
    document.body.appendChild(div)
    const _node = ReactDOM.render(<ConfirmInfoDiolag config={config} />, div)
    return {
        add(node) {
            return _node.add(node)
        },
        destroy() {
            ReactDOM.unmountComponentAtNode(div)
            document.body.removeChild(div)
        }
    }
}

const confirmInfo = (config) => {
    let options = {
        message: null,
        buttonNoText: null,
        buttonYesText: null,
        handlerHide: null,
        handleSubmit: null
    };
    if (config && typeof config !== 'object') {
        options.content = config;
    }
    config = { ...options, ...config };
    return createNode(config);
}

export default confirmInfo;

comfirmInfo.js

import React, { Component } from 'react'
class ConfirmInfoDiolag extends Component {
    constructor() {
        super()
        this.state = { btnStatus: true }
        this.handleClose = this.handleClose.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.removeConfirmInfo = this.removeConfirmInfo.bind(this)
    }
    removeConfirmInfo() {
        let confirmInfoList = document.querySelectorAll('.commonBox');
        document.body.removeChild(confirmInfoList[0]);
    }
    handleClose() {
        this.props.config.handlerHide ? this.props.config.handlerHide() : '';
        this.removeConfirmInfo();
    }
    handleSubmit() {
        this.props.config.handleSubmit ? this.props.config.handleSubmit(): '';
        this.removeConfirmInfo();
    }
    render() {
        const config = this.props.config;
        return (
            <div className="confirmInfo">
                <div className="confirmInfo-box">
                    <div className="confirmInfo-main">
                        <div className="confirmInfo-icon">
                            <img src={require('./info.png')} alt="" className="tip-img" />
                        </div>
                        <div className="confirmInfo-msg">
                            { config.message }
                        </div>
                    </div>
                    <div className="confirmInfo-btn">
                        <button onClick={this.handleClose}>{ config.buttonNoText ? config.buttonNoText : '否' }</button>
                        <button onClick={this.handleSubmit}>{ config.buttonYesText ? config.buttonYesText : '是' }</button>
                    </div>
                </div>
            </div>
        )
    }
}

export default ConfirmInfoDiolag

comfirmInfo.css

.confirmInfo {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.confirmInfo-box {
    width: 500px;
    padding: 40px 20px;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.confirmInfo-btn{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}
.confirmInfo-btn > button {
    min-width: 80px;
    padding: 10px;
    background: #ffbe34;
    border: 1px solid #ffbe34;
    color: #fff;
    border-radius: 4px;
}
.confirmInfo-btn > button:first-child{
    margin-right: 20px;
    background: #fff;
    border: 1px solid #fff;
    color: #000;
}
.confirmInfo-main{
    width: 100%;
    min-height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.confirmInfo-icon{
    width: 60px;
    height: 60px;
    margin: 0 20px 0 40px;
}
.confirmInfo-msg{
    width: 100%;
    font-size: 14px;
    color: #fff;
    padding: 20px;
    text-align: center;
}
.tip-img{
    width: 100%;
    height: 100%;
}

在组件中使用

import ComfirmInfo from './plugin/ConfirmInfo';

handleComfirm() {
	ComfirmInfo({
		message: '是否确认删除此数据?',
		buttonNoText: '取消',
		buttonYesText: '确定',
		handleSubmit: () => {
		console.log('fgggggggggggg', '确定');
		}
	});
}

<button onClick={this.handleComfirm} />