react封装全局弹框的方法是什么

这篇文章主要讲解了"react封装全局弹框的方法是什么"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"react封装全局弹框的方法是什么"吧！

弹框效果图

文件布局

index.js

/* 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 (        
          
            
{alertTitle}
                        
{alertTip}
             {                this.confirm()              }}              className="alert-close"              src={close}              alt="关闭"            />          
        
    )  }}const div = document.createElement('div')const props = {}document.body.appendChild(div)const Box = ReactDOM.render(React.createElement(Toptips, props), div)export default Box

less

.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;}}

用法

alertTitle 弹框标题
alertTip 弹框内容，样式自己自定义
closeAlert 关闭时候返回信息，可要可不要，根据自己需求。

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

感谢各位的阅读，以上就是"react封装全局弹框的方法是什么"的内容了，经过本文的学习后，相信大家对react封装全局弹框的方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！