前言
我是歌谣 我有个兄弟 巅峰的时候排名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代表文件中的内容 根据取消和确定中的方法进行子传父的调用 确定和取消会触发的回调