#私藏项目实操分享# 【React工作记录二十一】ant design封装一个弹框组件

简介: #私藏项目实操分享# 【React工作记录二十一】ant design封装一个弹框组件

前言

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

导语

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

image.png

代码部分

//取消机构和取消讲师的方法封装
//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} />


运行结果

image.png

总结

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

             

相关文章
|
9月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
152 0
|
5月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
9月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
229 0
|
9月前
|
前端开发
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
9月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
69 1
|
9月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
61 0
|
9月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
3月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
111 9
|
4月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
259 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生