前言
上篇实现了一个Ant Model的封装方案，虽然能work,但代码有点丑不够美观。本篇结合了React的高阶组件特性，传入一个Form类即可创建一个Modal类。现在做如下陈述。
示意图
解释如下
- createModal为一个高阶函数(也称高阶组件)，传入一个Form类，获得一个Modal类，接受和返回的对象类似于Java里的Class类
- Modal类的创建过程中并没有定义Form,因此它会直接使用createModal里的Form。
- 这样传入一个LoginForm,就可获得LoginModal.
-
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}/>
}
