目錄

前言

代碼

簡要

引用

效果

---

前言

我是歌謠 放棄很容易 但是堅持一定很酷 為了保證react代碼的一個簡潔性 最近開始封裝組件,

直接上代碼 因為都很簡單的模式 這邊直接進行講解

代碼

//取消機構(gòu)和取消講師的方法封裝 //params visible控制彈框的一個現(xiàn)實和隱藏 import React from 'react'; import {Modal,Icon,Button } from 'antd';class CancelModel extends React.Component {stata = {}//控制確定調(diào)用的函數(shù)handleOk=() => {this.props.handleOk&&this.props.handleOk();}//控制彈窗的一個關(guān)閉handleCancel=() => {this.props.handleCancel&&this.props.handleCancel();}//控制頁面跳轉(zhuǎn)的參數(shù)handleSkip=() => {// this.props.handleSkip&&this.props.handleSkip();} render() {const {cancleVisible}=this.propsreturn (<div><Modaltitle="提示"visible={cancleVisible}onOk={this.handleOk}onCancel={this.handleCancel}style={{textAlign:'center'}}><Icon type="exclamation-circle" /><p>該講師關(guān)聯(lián)相關(guān)課程,不可取消該講師</p>{/* <Button type="link" block onClick={this.handleSkip}>點擊跳轉(zhuǎn)</Button> */}</Modal></div>)} }export default CancelModel

簡要

1this.props.handleCancel&&this.props.handleCancel();判斷方法名是否存在

2?const?{cancleVisible}=this.props父組件綁定值進行彈出框的顯示和隱藏

3?this.props.handleCancel&&this.props.handleCancel();想父組件傳入方法

引用

import CancelModel from './ComponentsList/cancleModel'

?

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

效果

?

總結(jié)

以上是生活随笔為你收集整理的React封装一个组件弹出框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。