react如何实现弹出模态框

这篇文章主要介绍“React如何实现弹出模态框”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react如何实现弹出模态框”文章能帮助大家解决问题。

react实现弹出模态框的方法：1、用createPortal把元素直接渲染到“document.body”下；2、通过“modelShow”和“modelShowAync”来控制弹窗的显示隐藏；3、用一个控制器controlShow来流畅执行更新任务即可。

react实现Modal弹窗

一、Dialog.js文件

import React, {useMemo, useEffect, useState} from 'react'import ReactDOM from 'react-dom'// 控制弹窗隐藏以及动画效果const controlShow = (f1, f2, value, timer) => {    f1(value)    return setTimeout(() => {        f2(value)    }, timer)}export const Dialog = (props) => {    const {width, visible, closeCb, onClose} = props    // 控制 modelShow动画效果    const [modelShow, setModelShow] = useState(visible)    const [modelShowAsync, setModelShowAsync] = useState(visible)    const renderChildren = useMemo(() => {        // 把元素渲染到组件之外的document.body 上        return ReactDOM.createPortal(<div style={{display: modelShow ? 'block' : 'none'}}>            <div className="model_container" style={{opacity: modelShowAsync ? 1 : 0}}>                <div className="model_wrap">                    <div style={{width: width + 'px'}}> {props.children} </div>                </div>            </div>            <div className="model_container mast" onClick={() => onClose && onClose()}                 style={{opacity: modelShowAsync ? 0.6 : 0}}/>        </div>, document.body)    }, [modelShow, modelShowAsync])    useEffect(() => {        let timer        if (visible) {            // 打开弹窗，            timer = controlShow(setModelShow, setModelShowAsync, visible, 30)        } else {            timer = controlShow(setModelShowAsync,setModelShow,visible,1000)        }        return () => {            timer && clearTimeout(timer)        }    }, [visible])    return renderChildren}

二、Modal.js

import {Dialog} from "./Dialog";import React, {useEffect, useState} from 'react'import ReactDOM from 'react-dom'import './style.sCSS'class Modal extends React.PureComponent {    // 渲染底部按钮    renderFooter = () => {        const {onOk, onCancel, cancelText, okText, footer} = this.props        //    触发onOk / onCancel回调        if (footer && React.isValidElement(footer)) return footer        return <div className="model_bottom">            <div className="model_btn_box">                <button className="searchbtn"                        onClick={(e) => {                            onOk && onOk(e)                        }}>{okText || '确定'}                </button>                <button className="concellbtn"                        onClick={(e) => {                            onCancel && onCancel(e)                        }}>{cancelText || '取消'}                </button>            </div>        </div>    }    // 渲染底部    renderTop = () => {        const {title, onClose} = this.props        return <div className="model_top">            <p>{title}</p>            <span className="model_top_close" onClick={() => onClose && onClose()}>X</span>        </div>    }    // 渲染弹窗内容    renderContent = () => {        const {content, children} = this.props        return React.isValidElement(content) ? content : children ? children : null    }    render() {        const {visible, width = 500, closeCb, onClose} = this.props        return <Dialog            closeCb={closeCb}            onClose={onClose}            visible={visible}            width={width}        >            {this.renderTop()}            {this.renderContent()}            {this.renderFooter()}        </Dialog>    }}// 静态方法let ModalContainer = nullconst modelSymbol = Symbol('$$_model_Container_hidden')// 静态属性show——控制Modal.show = (config) => {    //  如果modal已经存在，name就不需要第二次show    if (ModalContainer) return    const props = {...config, visible: true}    const container = ModalContainer = document.createElement('div')    // 创建一个管理者，管理model状态    const manager = container[modelSymbol] = {        setShow: null,        mounted: false,        hidden() {            const {setShow} = manager            setShow && setShow(false)        },        destroy() {            //    卸载组件            ReactDOM.unmountComponentAtnode(container)            // 移除节点            document.body.removeChild(container)            // 置空元素            ModalContainer = null        }    }    const ModelApp = (props) => {        const [show, setShow] = useState(false)        manager.setShow = setShow        const {visible, ...trueProps} = props        useEffect(() => {            // 加载完成，设置状态            manager.mounted = true            setShow(visible)        }, [])        return <Modal {...trueProps} closeCb={() => manager.mounted && manager.destroy()} visible={show}/>    }    // 插入到body中    document.appendChild(container)    // 渲染React元素    ReactDOM.render(<ModelApp/>, container)    return manager}Modal.hidden = () => {    if(!ModalContainer) return    // 如果存在ModalContainer 那么隐藏ModalContainer    ModalContainer[modelSymbol] && ModalContainer[modelSymbol].hidden()}export default Modal

三、style.scss样式文件

$bg-linear-gradien-red-light : linear-gradient(135deg, #fc4838 0%, #f6346b  100%);$bg-linear-gradien-red-dark : linear-gradient(135deg, #fc4838 0%, #f6346b  100%);.constrol{  padding: 30px;  width: 500px;  border: 1px solid #ccc;  height: 200px;}.feel{  padding: 24px;}.model_top{  height: 40px;  border-radius: 5px  5px 0 0 ;  position: relative;  p{    height: 40px;    font-weight: bold;    line-height: 40px;    padding-left: 14px;  }  background-color: #eee;  .model_top_close{    position: absolute;    font-size: 16px;    cursor: pointer;    right: 24px;    top: 8px;  }}.model_bottom{  height: 50px;  padding-top: 10px;  .model_btn_box{    display: inline-block;    margin-left: 50%;    transfORM: translateX(-50%);  }}.model_container{  .model_wrap{    position: absolute;    border-radius:5px ;    background: #fff;    left:50%;    top:50%;    transform: translate(-50%,-50%);  }  position: fixed;  z-index: 10000;  left:0;  top:0;  transition: opacity 0.3s;  right: 0;  bottom: 0;}.mast{  background-color: #000;  z-index: 9999;}.searchbtn{  background: linear-gradient(135deg, #fc4838 0%, #f6346b  100%);  color: #fff;  min-width: 96px;  height :36px;  border :none;  border-radius: 18px;  font-size: 14px;  font-weight: 500;  cursor: pointer;  margin-left: 20px !important;}.searchbtn:focus{  background: $bg-linear-gradien-red-dark;  color: #fff;  min-width: 96px;  height: 36px;  border: none;  border-radius: 18px;  font-size: 14px;  font-weight: 500;  cursor: pointer;  margin-left: 20px !important;  box-shadow: 0 2px 7px 0 #FAA79B;}.searchbtn:hover{  background :$bg-linear-gradien-red-light;  color :#fff;  min-width: 96px;  height :36px;  margin-left: 20px !important;  border: none;  border-radius: 18px;  font-size :14px;  font-weight: 500;  cursor: pointer;  box-shadow: 0 2px 7px 0 #FAA79B;}.searchbtn:disabled{  background: #c0c6c6;  color :#fff;  min-width: 96px;  height :36px;  font-size :14px;  font-weight: 500;  border: none;  border-radius: 18px;  cursor: not-allowed;}.concellbtn{  background :#fff;  color :#303133;  width: 96px;  height: 36px;  font-size: 14px;  font-weight: 500;  border :1px solid #E4E7ED;  border-radius: 18px;  cursor: pointer;  // margin-right: 10px;  margin-left: 10px;}.concellbtn:hover{  background :rgba(220, 223, 230, 0.1);  color: #303133;  width :96px;  height: 36px;  font-size: 14px;  font-weight: 500;  border :1px solid #E4E7ED;  border-radius: 18px;  cursor: pointer;  // margin-right: 10px;  margin-left: 10px;}.concellbtn:focus{  background :rgba(220, 223, 230, 0.24);  color: #303133;  width :96px;  height: 36px;  font-size: 14px;  font-weight: 500;  border: 1px solid #C0C4CC;  border-radius: 18px;  cursor: pointer;  margin-right: 10px;  margin-left: 10px;}

四、调用例子

import React, {useState, useMemo} from 'react'import Modal from './customPopup/Modal'export default function App() {    const [ visible , setVisible ] = useState(false)    const [ nameShow , setNameShow ] = useState(false)    const handleClick = () => {        setVisible(!visible)        setNameShow(!nameShow)    }        const [ handleClose ,handleOk, handleCancel ] = useMemo(()=>{        const Ok = () =>  console.log('点击确定按钮')        const Close = () => setVisible(false)        const Cancel = () => console.log('点击取消按钮')        return [Close , Ok , Cancel]    },[])    return <div>        <Modal            onCancel={handleCancel}            onClose={handleClose}            onOk={handleOk}            title={'标题'}            visible={visible}            width={700}        >            <div className="feel" >              内容。。。。。。。            </div>        </Modal>        <button onClick={() => {            setVisible(!visible)            setNameShow(false)        }}        > model show </button>        <button onClick={handleClick} > model show ( 显示作者 ) </button>    </div>}

实现效果

关于“react如何实现弹出模态框”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。