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代表文件中的内容 根据取消和确定中的方法进行子传父的调用 确定和取消会触发的回调

​