const Modal = ({
visible=false,
style,
width= 520,
zIndex=1000,
centered=false,
title='title',
footer,
wrapClassName='',
okText='确定',
okType='primary',
cancelText='取消',
cancelType='default',
closable= true,
onOk=() => {},
onCancel=() => {},
mask=true,
maskClosable= true,
children='Basic body'
}) => {
return (
visible ?
ReactDOM.createPortal(<div>....</div>,document.querySelector('body')) : null
)
}
Modal
的显隐由外部控制,内部不控制;ReactDOM.createPortal(child,container)
挂载至bodyimport React,{ PureComponent } from 'react';
import { Modal,Button } from 'new_react';
export default class baseModal extends PureComponent {
state = {
visible: false
}
showModal = () => {
this.setState({
visible: true
})
}
onCancel = () => {
console.log('cancel')
this.setState({
visible: false
})
}
onOk = () => {
console.log('ok')
this.setState({
visible: false
})
}
render() {
const { visible } = this.state;
return (
<div>
简单基本用法:
<Button onClick={this.showModal}>modal</Button>
<Modal visible={visible} onCancel={this.onCancel} onOk={this.onOk}>
<div>modal提示内容</div>
</Modal>
</div>
)
}
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。