react笔记（十）：popup弹出框组件

popup弹出框容器

思路：设计一个隐藏显示的div容器，自定义配置子组件，由一个props参数动态控制隐藏显示

新建popup.tsx

import React from 'react'
import './popup.css'

interface PopupProps {
    show?: boolean,//是否显示
    bagColor?: string,//背景色
    children?: React.ReactNode,//子组件
}


class Popup extends React.Component <any,PopupProps>  {
    constructor (props:PopupProps) {
        super(props);
        this.state = {
            bagColor: this.props.bagColor || 'rgba(0,0,0,0.2)'//初始化背景颜色，设置默认透明色
        }
    }
    
    render () {
        let show = this.props.show;
        let className;
        // 判断是否显示
        if(show){
            className = 'popup popup-show';
        }else{
            className = 'popup popup-hide';
        }
     
        return  <div className={className} style={{background: this.state.bagColor}}>
                    <div className="popup-box">
                         {this.props.children}
                    </div>
                </div>
    }
}

export default Popup;

import React from 'react'
import './popup.css'

interface PopupProps {
    show?: boolean,//是否显示
    bagColor?: string,//背景色
    children?: React.ReactNode,//子组件
}


class Popup extends React.Component <any,PopupProps>  {
    constructor (props:PopupProps) {
        super(props);
        this.state = {
            bagColor: this.props.bagColor || 'rgba(0,0,0,0.2)'//初始化背景颜色，设置默认透明色
        }
    }
    
    render () {
        let show = this.props.show;
        let className;
        // 判断是否显示
        if(show){
            className = 'popup popup-show';
        }else{
            className = 'popup popup-hide';
        }
     
        return  <div className={className} style={{background: this.state.bagColor}}>
                    <div className="popup-box">
                         {this.props.children}
                    </div>
                </div>
    }
}

export default Popup;

新建popup.css

css

.popup{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.popup-box{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.popup-show{ display: 'block;';}
.popup-hide{ display: none;}

.popup{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.popup-box{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.popup-show{ display: 'block;';}
.popup-hide{ display: none;}

调用

import Popup from '../components/widget/popup'
//初始化isShow,配置是否显示popup
this.state = {
    isShow: false
}
// 控制器
toToggole(){
      this.setState({
          isShow: this.state.isShow ? false : true
      })
}
// 自定义子组件内容
<Popup show={this.state.isShow}>
    <div style={{width:'300px',lineHeight:'300px',background:'#fff',textAlign:'center'}}>
        <Button type="primary" onClick={()=>{this.toToggole()}}>关闭吧</Button>
    </div>
</Popup>
// 触发显示popup
<Button type="primary" onClick={()=>{this.toToggole()}}>显示</Button>

import Popup from '../components/widget/popup'
//初始化isShow,配置是否显示popup
this.state = {
    isShow: false
}
// 控制器
toToggole(){
      this.setState({
          isShow: this.state.isShow ? false : true
      })
}
// 自定义子组件内容
<Popup show={this.state.isShow}>
    <div style={{width:'300px',lineHeight:'300px',background:'#fff',textAlign:'center'}}>
        <Button type="primary" onClick={()=>{this.toToggole()}}>关闭吧</Button>
    </div>
</Popup>
// 触发显示popup
<Button type="primary" onClick={()=>{this.toToggole()}}>显示</Button>

运行效果

分享也是一种成长，谢谢观看。

本文到此结束。

反馈信息

INFO

邮箱： open_teams@163.com

react笔记（十）：popup弹出框组件 ​

反馈信息 ​

react笔记（十）：popup弹出框组件

反馈信息