What is the method of encapsulating the global pop-up box in react?

This article mainly explains "what is the method of encapsulating the global pop-up frame by react". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the method of encapsulating the global pop-up frame in react".

Pop-up frame effect picture

File layout

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: 'details' CloseAlert: () = > {}} class Toptips extends Component {state = {... defaultState} / / css animation component is set to target component FirstChild = props = > {const childrenArray = React.Children.toArray (props.children) return childrenArray [0] | | null} / / close pop-up box 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= "close" / >)} 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;}}

Usage

AlertTitle pop-up box title

AlertTip pop-up box content, custom style

CloseAlert returns information when it is closed, but do not want it or not, according to your own needs.

Import Toptips from ". / Toptips" Toptips.open ({alertTitle: 'instruction details', alertTip: that.htms (val), closeAlert: function () {console.log ("closed...");}}); htms = val = > {return (

Contents of the instructions:

{val.fdTitle}

Details of the instructions:

{val.fdTitle}

Measures and results:

{val.fdContent}

Progress details:

)} Thank you for your reading. The above is the content of "what is the method of react encapsulating the global pop-up box". After the study of this article, I believe you have a deeper understanding of what is the method of encapsulating the global pop-up box of react, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!