react命令式全局调用组件、js直接调用组件

前言

我们要满足的需求就是，封装axios的过程中，对于异常的处理，玩玩要调用某个组件让他提示错误信息（当然，在不会的情况下用alert是最明智的选择），现在，通过阅读本篇文章，可以在js中调用弹窗组件 甭价弹窗组件是基于antd-mobal的modal组件再次封装 https://mobile.ant.design/components/modal-cn/

Dialog.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal} from 'antd-mobile';
class DialogBox extends Component {
  constructor(props){
    super(props);
    this.state = {
      alertStatus: false, //是否显示提示框

      title:'提示', //标题
      content:'', //提示内容
      cancelText:'取消',
      confirmText:'确认',
      popup: false,//是否弹窗模式
      maskClosable: true,//点击蒙层是否允许关闭
      animationType: 'fade', // 'slide-down / up' / 'fade' / 'slide'
      isShowCancel:false, //是否显示确认按钮
      isShowConfirm:true, //是否显示确认按钮
      closable: false,//是否显示关闭按钮
      cancelCallbackFn:function(){}, //取消 回调函数
      confirmCallbackFn:function (){}//确认 回调函数
    }
  }

  //打开提示框
  open(options){
    options = options || {};
    options.alertStatus = true;
    this.setState({
      ...options
    })
  }
  //取消
  cancel(){
    this.state.cancelCallbackFn();
    this.close()
  }
  //确认
  confirm () {
    this.state.confirmCallbackFn();
    this.close()
  }
  close (){
    this.setState({
      alertStatus:false
    })
  }
  render(){
    let opts = this.state;
    let footer = [];
    if (opts.isShowCancel){
      footer.push({ text: opts.cancelText, onPress: () => this.cancel() })
    }
    if (opts.isShowConfirm){
      footer.push({ text: opts.confirmText, onPress: () => this.confirm() })
    }
    return (
        this.cancel()}
          afterClose={() => this.cancel()}
        >
          {opts.content}
        
    )
  }
}

let div = document.createElement('div');
document.body.appendChild(div);
let DialogAlert = ReactDOM.render( ,div);
export default DialogAlert;

xxx.js

import Dialog from '../component/GLOBAL/Dialog'
  Dialog.open({
    title: '请求异常',
    content:"请求失败 未知错误 •﹏•",
    confirmText:'确认',
    alertStatus: true
  });