Ant Modal的封装二

前言

上篇实现了一个Ant Model的封装方案，虽然能work,但代码有点丑不够美观。本篇结合了React的高阶组件特性，传入一个Form类即可创建一个Modal类。现在做如下陈述。

示意图

解释如下

1. createModal为一个高阶函数(也称高阶组件)，传入一个Form类，获得一个Modal类，接受和返回的对象类似于Java里的Class类
2. Modal类的创建过程中并没有定义Form,因此它会直接使用createModal里的Form。
3. 这样传入一个LoginForm,就可获得LoginModal.

4. LoginModal在实例化时，需要传入props，包括hint(在主页面上的提示)和title(对话框的标题,也称caption)

   
   
   示意图

代码

只贴出createModal的代码

const createModal= SubComponent =>class extends React.Component {
            state = {
                visible: false,
            }
            showModal = (e)=>{
                this.setState({visible:true})
            }
            handleClose = ()=>{
                this.setState({visible:false})
            }
            renderAnchor = (hint, anchor)=>{
                if(anchor=='button') {
                    return 
                        {hint}
                        
                } 
                return 
                    {hint}
                    
            }
            render() {
                const {hint, title, anchor, ...rest} = this.props
                return (
                    
                        {this.renderAnchor(hint, anchor)}
                        
                            
                        
                    
                )
            }
        }
export default createModal

调用示例

RegisterForm是需要用Modal包装的组件

const RegisterComponent=createModal(RegisterForm)
const RegisterModal = ({hint='注册',title='请注册',anchor='span'})=>{
    return 
}