前言
我是歌谣 我有个兄弟 巅峰的时候排名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代表文件中的内容 根据取消和确定中的方法进行子传父的调用 确定和取消会触发的回调
————————————————
版权声明：本文为CSDN博主「前端大歌谣」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/geyaoisnice/article/details/122159897
