Antd Modal的封装

Antd Modal 在实际前端项目中很常用。在实际使用中，要在包含Modal的父组件类里设置state控制Modal的显示，handleOK,onClick回调函数绑定在anchor和modal上，可以改变state的状态。这对所有对话框是通用的，因此可以封装起来，减少代码的编写量。

前置知识

react的基础知识，antd库的使用

代码

ModalFactory

const ModalFactory = {
    LoginModal() {
        return 
    },
    ProfileModal() {
        return 
    },
    AccountModal({hint='编辑', type, account={}}) {
        return (
                            
                        )
                    }
                    type={type}
                />
    }
}

BaseModal

class BaseModal extends React.Component {
    state = {
        visible: false,
    }
    showModal = (e)=>{
        console.log(`show ${this.props.hint} modal`)
        e.preventDefault()
        this.setState({visible:true})
    }
    handleCancel = ()=>{
        console.log(`hide ${this.props.hint} modal`)
        this.setState({visible:false})
    }
    handleOK = ()=>{
        console.log(`hide ${this.props.hint} modal`)
        this.setState({visible:false})
    }
    renderAnchor = ()=>{
        if(this.props.type=='button') {
            return {this.props.hint}
        } 
        return {this.props.hint}
    }
    render() {
        console.log(`show ${this.props.hint} span`)
        const Component = this.props.form

        return (
            
                {this.renderAnchor()}
                
                    
                
            
        )
    }
}

使用

const LoginModal = ModalFactory.LoginModal
const View = ()=>