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 <Button type='primary' onClick={this.showModal}>
                        {hint}
                        </Button>
                } 
                return <span style={{ color :'blue'}} onClick={this.showModal}>
                    {hint}
                    </span>
            }
            render() {
                const {hint, title, anchor, ...rest} = this.props
                return (
                    <span>
                        {this.renderAnchor(hint, anchor)}
                        <Modal title={title} visible={this.state.visible}
                            footer={null}
                            onOk={this.handleClose}
                            onCancel={this.handleClose}>
                            <SubComponent onSubmit={this.handleClose} {...rest}/>
                        </Modal>
                    </span>
                )
            }
        }
export default createModal

调用示例

RegisterForm是需要用Modal包装的组件

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