目录
前言
代码
简要
引用
效果
前言
我是歌谣 放弃很容易 但是坚持一定很酷 为了保证react代码的一个简洁性 最近开始封装组件,
直接上代码 因为都很简单的模式 这边直接进行讲解
代码
//取消机构和取消讲师的方法封装//params visible控制弹框的一个现实和隐藏import React from 'react';import {Modal,Icon,Button } from 'antd';class CancelModel extends ponent {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();判断方法名是否存在
2const{cancleVisible}=this.props父组件绑定值进行弹出框的显示和隐藏
3this.props.handleCancel&&this.props.handleCancel();想父组件传入方法
引用
import CancelModel from './ComponentsList/cancleModel'
<CancelModel handleOk={this.handleLectureOk}cancleVisible={cancleVisible} handleCancel={this.handleLectureCancle} />
