react实现modal/dialog组件

本文旨在用最清楚的结构去实现一些组件的基本功能。希望和大家一起学习，共同进步

效果展示

测试组件

class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            modalVisible: false
        }
    }
    render() {
        return (
            <Modal visible={this.state.modalVisible} onCancel={() => {
                console.log("modal close")
                this.setState(
                    {
                        modalVisible: false
                    }
                )
            }} onConfirm={() => {
                console.log("点击了确定按钮")
            }}>
                <div className="modal-body">
                    <div className="row">
                        <div className="left"><span className="label">预约数量：</span><span className="value">2</span></div>
                        <div className="right"><span className="label">总金额为：</span><span className="value">￥200</span></div>
                    </div>
                    <div className="row">
                        <div className="left"><span className="label">余额抵扣：</span><span className="value">￥0</span></div>
                        <div className="right"><span className="label">应付余额：</span><span className="value">￥200</span></div>
                    </div>
                </div>
            </Modal>
        )
    }
}
export default Test;

Modal.jsx

import React, { Component } from 'react';
import "./modal.scss"
class Modal extends Component {
    render() {
        return this.props.visible?(
            <div className="modal-mask">
                <div className="modal-wrap">
                    <div className="header">
                        <div className="title">确认付款</div>
                    </div>
                    <div className="body">
                        {this.props.children}
                    </div>
                    <div className="footer">
                        <div className="cancel" onClick={this.props.onCancel.bind(this)}>取消</div>
                        <div className="confirm" onClick={this.props.onConfirm.bind(this)}>确定</div>
                    </div>
                </div>
            </div>
        ):(<span></span>)
    }
}
export default Modal;

modal.scss

.modal-mask{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .modal-wrap{
        z-index: 99;
        height: 265px;
        width: 86%;
        margin-left: 6%;
        margin-top: 120px;
        background: url("../../../assets/img/modalHeader.png") no-repeat ;
        background-size:100% 100%;
        animation:slideDown .3s;
        .header{
            height:104px;
            .title{
                padding-top: 20px;
                color: #ffffff;
                font-size: 22px;
            }
        }
        .body{
            height: 115px;
        }
        .footer{
            height: 46px;
            .cancel{
                display: inline-block;
                height: 46px;
                line-height: 46px;
                width: 50%;
                font-size: 15px;
                color: #c1c4c9;
                border-radius: 0 0  0 15px;
                &:active{
                    background: rgb(221,221,221)
                }
            }
            .confirm{
                display: inline-block;
                height: 46px;
                line-height: 46px;
                width: 50%;
                font-size: 15px;
                color: #1eb94a;
                border-radius: 0 0 15px 0;
                &:active{
                    background: rgb(221,221,221)
                }
            }
        }
    }
}
@keyframes slideDown
{
from {margin-top:0px;}
to {margin-top:120px;}
}