React封装一个组件弹出框

目录

前言

代码

简要

引用

效果

---

前言

我是歌谣 放弃很容易 但是坚持一定很酷 为了保证react代码的一个简洁性 最近开始封装组件,

直接上代码 因为都很简单的模式 这边直接进行讲解

代码

//取消机构和取消讲师的方法封装
//params visible控制弹框的一个现实和隐藏
import React from 'react';
import {
    Modal,
   Icon,
   Button 
  } from 'antd';

class CancelModel extends React.Component {
    stata = {
        
    }

    //控制确定调用的函数
    handleOk=() => {
        this.props.handleOk&&this.props.handleOk();
    }
     //控制弹窗的一个关闭
     handleCancel=() => {
        this.props.handleCancel&&this.props.handleCancel();
    }
    //控制页面跳转的参数
    handleSkip=() => {
        // this.props.handleSkip&&this.props.handleSkip();
    } 
    render() {
        const {cancleVisible}=this.props
      
        return (<div>
        <Modal
          title="提示"
          visible={cancleVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          style={{textAlign:'center'}}
        >
            <Icon type="exclamation-circle" />
            <p>该讲师关联相关课程,不可取消该讲师</p>
            {/* <Button type="link" block onClick={this.handleSkip}>
            点击跳转
            </Button> */}
        
        </Modal>
        </div>)
    }
}

export default CancelModel

简要

1this.props.handleCancel&&this.props.handleCancel();判断方法名是否存在

2 const {cancleVisible}=this.props父组件绑定值进行弹出框的显示和隐藏

3 this.props.handleCancel&&this.props.handleCancel();想父组件传入方法

引用

import CancelModel from './ComponentsList/cancleModel'

 

 <CancelModel  handleOk={this.handleLectureOk}
 cancleVisible={cancleVisible} handleCancel={this.handleLectureCancle} />

效果