Ant design pro常用组件( 1 ):Modal的常用写法

import {Modal } from 'antd';
class CustomerDetail extend Component{
	render(){
	    return (
	        <Modal
	           width={750}
	            title=''
	           visible={this.state.isVisible}
	            footer={null}
	            destroyOnClose
	           destroyOnClose={true}
	           onCancel={this.closeModalHandle}
	          >             
	         {/*组件内容  -- 在组件中显示底部内容*/}   
	         
	         </Modal>
	    )
	}；
	closeModalHandle =()=>{
  		this.setState({isVisible:false});
	};
}

多个组件公用一个Modal

class CustomerDetail extends Component{
 	//获取组件内容
		renderModalHandle(){
			{/closeModal是父组件传递给子组件的方法/}   
			const {modalType} = this.state;
			switch( modalType ){
				case 'edit':
					return 
					<CustomerOperate closeModal={ this.closeModalHandle }  />
				case 'assign':
					return 
					<ManagetAssign closeModal={this.closeModalHandle} />;
					case 'resign':
               			 return 
               			 <CompanyResign/>;
			}
		}	;
		 //获取modal 标题
		 getModalTitle():any{
				 const { modalType } = this.state;
		        if( modalType ){
		            switch(modalType){
		                case 'edit':
		                    return '编辑信息';
		                case 'assign':
		                    return '分派负责人';
		            }
		        }
		};
		render(){
	        return (
		            <Modal
		                  width={750}
		                   title={this.getModalTitle()}
		                    visible={this.state.isVisible}
		                    footer={null}
		                   destroyOnClose={true}
		                  onCancel={this.closeModalHandle}
		                    > 
		                   		 {this.renderModalHandle()}
		                    </Modal>
	        )
    }
}