react封装全局弹框的方法

/* eslint-disable react/no-render-return-value */import React, { Component } from 'react'import { is, fromJS } from 'immutable'import ReactDOM from 'react-dom'import './alert.less'const close = require('../images/guanbi.png')const line = require('../images/line.png')const defaultState = {  alertStatus: false,  alertTip: null,  alertTitle: '详情',  closeAlert: () => {}}class Toptips extends Component {  state = {    ...defaultState  }  // css动画组件设置为目标组件  FirstChild = props => {    const childrenArray = React.Children.toArray(props.children)    return childrenArray[0] || null  }  // 关闭弹框  confirm = () => {    const that = this    console.log(that)    this.setState(      {        alertStatus: false      },      () => {        that.state.closeAlert()      }    )  }  open = data => {    const options = data || {}    options.alertStatus = true    this.setState({      ...defaultState,      ...options    })  }  close = () => {    const that = this    that.state.closeAlert()    this.setState({      ...defaultState    })  }  shouldComponentUpdate = (nextProps, nextState) => {    return (      !is(fromJS(this.props), fromJS(nextProps)) ||      !is(fromJS(this.state), fromJS(nextState))    )  }  render() {    const { alertStatus, alertTip, alertTitle } = this.state    console.log(alertTip, alertTitle)    return (        <div          className="alert-con"          style={alertStatus ? { display: 'block' } : { display: 'none' }}        >          <div className="alert-context">            <div className="alert-content-title">{alertTitle}</div>            <img className="alert-content-line" src={line} alt="line" />            <div className="alert-content-detail">{alertTip}</div>            <img              role="presentation"              onClick={() => {                this.confirm()              }}              className="alert-close"              src={close}              alt="关闭"            />          </div>        </div>    )  }}const div = document.createElement('div')const props = {}document.body.appendChild(div)const Box = ReactDOM.render(React.createElement(Toptips, props), div)export default Box

.alert-con {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(255, 255, 255, 0.3);  z-index: 222;}.alert-context {  // background-color: #fff;  // border-radius: 16px;  position: relative;  // height: 500px;  height: 90%;  width: 750px;  margin: 40px auto 0;  background: url(../images/alertBJ.png) no-repeat center;  background-size: 100% 100%;  .alert-close{    width: 30px;    height: 30px;    position: absolute;    right: 30px;    top: 30px;  }  .alert-content-title{    width: 100%;    height: 80px;    line-height: 80px;    color: #fff;    text-align: center;    font-size: 36px;    font-weight: bolder;    // background: url(../images/line.png) no-repeat left bottom;  }  .alert-content-line{    width: 100%;    height: 20px;    margin-top: -44px;    margin-left: -6px;  }  .alert-detais-list{    width: 102%;    height: 100%;    overflow-y: auto;    padding: 20px 60px;    .alert-detais-list-C{      p{        &:nth-child(1){          font-size: 14px;          line-height: 20px;          color: #FFFFFF;          letter-spacing: 1.4px;        }        &:nth-child(2){          line-height: 24px;          font-size: 18px;          color: #FFFFFF;        }      }    }  }  .alert-content-detail{    // height: 100%;    height: calc(100% - 100px);    /* overflow-y: auto; */    overflow: hidden;    width: 98%;    margin-top: -26px;  }  .alert-details-pdf{    width: 102%;    height: 100%;    overflow-y: auto;    padding: 20px 60px;    .alert-details-button{      display: flex;      flex-direction: row;      justify-content: flex-end;      margin-bottom: 10px;      p{        color:#fff;        line-height: 35px;        font-size: 16px;        margin-right: 20px;      }      a{        line-height: 35px;        font-size: 16px;        margin-right: 20px;      }    }  }.cameraWrap{  width: 100%;  height: 102%;  box-sizing: border-box;  padding: 12px 4px 0 14px;}}

import Toptips from "./Toptips"Toptips.open({      alertTitle: '批示详情',      alertTip: that.htms(val),      closeAlert: function () {        console.log("关闭了...");      }    });  htms = val => {    return (<div className="alert-detais-list">      <div className="alert-detais-list-C">        <p>批示内容：</p>        <p>{val.fdTitle}</p>      </div>      <div className="alert-detais-list-C">        <p>批示详述：</p>        <p>{val.fdTitle}</p>      </div>      <div className="alert-detais-list-C">        <p>措施及结果：</p>        <p>{val.fdContent}</p>      </div>      <div className="alert-detais-list-C">        <p>进度详情：</p>        <p></p>      </div>    </div>)  }