原创

react命令式全局调用组件


前言

我们要满足的需求就是,封装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 (
        <Modal
          popup={opts.popup}
          visible={opts.alertStatus}
          transparent
          closable={opts.closable}
          animationType={opts.animationType}
          maskClosable={opts.maskClosable}
          title={opts.title}
          footer={footer}
          onClose={()=>this.cancel()}
          afterClose={() => this.cancel()}
        >
          <p>{opts.content}</p>
        </Modal>
    )
  }
}

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

xxx.js

import Dialog from '../component/GLOBAL/Dialog'
  Dialog.open({
    title: '请求异常',
    content:"请求失败 未知错误 •﹏•",
    confirmText:'确认',
    alertStatus: true
  });
组件
react
  • 作者:零三(联系作者)
  • 最后更新时间:2020-08-22 15:48
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn