#yyds干货盘点 【React工作记录二十一】ant design封装一个弹框组件

 

目录

​​前言​​

​​导语​​

​​代码部分​​

​​引入组件​​

​​运行结果​​

​​总结​​

---

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 试着封装一个弹框的组件

​编辑

代码部分

//取消机构和取消讲师的方法封装
//params visible控制弹框的一个现实和隐藏
//params content文本内容
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,content}=this.props

        return (<div>
        <Modal
          title="提示"
          visible={cancleVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          style={{textAlign:'center'}}
        >
            <Icon type="exclamation-circle" />
            <p>{content||''}</p>
            {/* <Button type="link" block onClick={this.handleSkip}>
            点击跳转
            </Button> */}

        </Modal>
        </div>)
    }
}

export default CancelModel

引入组件

import CancelModel from '../common/ComponentsList/cancleModel'

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

运行结果

编辑

总结

content代表文件中的内容 根据取消和确定中的方法进行子传父的调用 确定和取消会触发的回调