目录

前言

代码

简要

引用

效果

---

前言

我是歌谣 放弃很容易 但是坚持一定很酷 为了保证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.propsreturn (<div><Modaltitle="提示"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} />

效果