这篇文章主要讲解了“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 (
<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 Boxless
.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 (<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>)
}感谢各位的阅读，以上就是“react封装全局弹框的方法是什么”的内容了，经过本文的学习后，相信大家对react封装全局弹框的方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
