React组件之DemalInfo

一。组件

import React, {Component} from 'react'
import {Modal} from 'antd'
/**
 *这个组件需要 以下参数和方法
 * @param title 标题
 * @param content 内容
 * @function hide 关闭弹框
 * @function sure 提交内容
 */
export default class ModalInfo extends Component {
    // 初始化页面常量 绑定事件方法
    constructor(props, context) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.cancelPopup = this.cancelPopup.bind(this);//取消新增，编辑
    }

    cancelPopup() { //取消编辑
        this.props.hide();
    }

    handleSubmit(e) {
        this.props.sure();
    }

    render() {
        const style = {
            modal: {top: 0, paddingBottom: 0, margin: 0},
        };
        const {title, content} = this.props;
        return (
            <Modal title={title} style={style.modal} visible={true} centered
                   onCancel={this.cancelPopup} onOk={this.handleSubmit}>
                <p>{content}</p>
            </Modal>
        )
    }
}

二。引用

import ModalInfo from '../components/modalInfo'

 {isLogoutFlag ? <ModalInfo hide={this.cancelPopup} sure={this._handleSureLogout} title='退出登录' content='确认退出登录吗？'/> : ''}