封装一个更易用的Dialog组件过程详解

下面是封装一个更易用的Dialog组件的完整攻略。

什么是Dialog组件

Dialog组件是一种常用的弹出框组件，通常用于展示提示信息、警告信息、用户输入等场景。Dialog组件具有以下特点：

• 以弹框的形式展示，中间居中显示；
• 显示内容一般为文本、表单或者自定义组件等；
• 可以通过按钮或者点击蒙层等方式关闭。

Dialog组件的封装步骤

步骤一：定义Dialog组件

Dialog组件通常需要包含以下内容：

• 遮罩层（蒙层）：遮罩层是Dialog组件显示时，背景变灰并不能操作其他区域的一层半透明层，点击遮罩层可以关闭Dialog组件。
• 弹出框容器：弹出框容器是Dialog组件的主体部分，用于显示Dialog组件的内容。
• Dialog组件的预设样式和默认属性

以下是Dialog组件的基本代码：

import React, { Component } from 'react';
import './Dialog.css';

class Dialog extends Component {
    static defaultProps = {
        visible: false,
        title: '',
        content: '',
        onCancel: () => {},
        onOk: () => {}
    }

    render() {
        const { visible, title, content, onCancel, onOk } = this.props;
        return (
            <div className={visible ? 'dialog-wrap' : 'dialog-wrap hide'}>
                <div className="dialog-content">
                    <div className="dialog-header">{title}</div>
                    <div className="dialog-body">{content}</div>
                    <div className="dialog-footer">
                        <button className="dialog-btn-cancel" onClick={onCancel}>取消</button>
                        <button className="dialog-btn-ok" onClick={onOk}>确定</button>
                    </div>
                </div>
            </div>
        )
    }
}

export default Dialog;

步骤二：封装Dialog组件的API

一般来说，我们会用一些比较简便的方式封装Dialog组件的API，让用户可以更加方便地调用Dialog组件，例如：

/**
 * 封装一个更易用的Dialog组件
 * @param {Object} options
 * @param {String} options.title - Dialog组件标题
 * @param {String | Component} options.content - Dialog组件内容
 * @param {Function} options.onCancel - 取消按钮回调
 * @param {Function} options.onOk - 确定按钮回调
 * @return {Function} - 关闭Dialog组件的函数
 */
function easyDialog(options) {
    const container = document.body.appendChild(document.createElement('div'));
    const close = () => {
        ReactDOM.unmountComponentAtNode(container);
        container.parentNode.removeChild(container);
    }
    ReactDOM.render(<Dialog visible={true} {...options} onCancel={close} onOk={close} />, container);
    return close;
}

通过以上封装，我们就可以在代码中像下面这样调用Dialog组件了。

import Dialog from 'components/Dialog/Dialog';
import easyDialog from 'components/Dialog/easyDialog';

class App extends Component {
    handleClick() {
        easyDialog({
            title: '提示',
            content: '确定删除吗？',
            onOk: () => {
                // 处理删除逻辑
            }
        });
    }

    render() {
        return (
            <button onClick={this.handleClick.bind(this)}>删除</button>
        )
    }
}

封装Dialog组件示例说明

示例一：基础Dialog组件封装

基础Dialog组件封装主要包含Dialog组件的样式定义和默认props属性值等。

样式定义：

在Dialog组件中，添加CSS样式定义，如：dialog-wrap、dialog-content、dialog-header、dialog-body、dialog-footer 等样式，以实现Dialog组件的可视化效果。

.dialog-wrap{
   width:100%;
   height:100%;
   position:fixed;
   top:0;
   left:0;
   background-color:rgba(0, 0, 0, 0.5);
   z-index:1000;
}

.dialog-wrap.hide{
   display:none;
}

.dialog-content{
   width:40%;
   height:30%;
   background-color:#eee;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}

.dialog-header{
   border-bottom:1px solid #f0f0f0;
   padding:10px;
   font-size:16px;
   font-weight:bold;
}

.dialog-body{
   padding:20px;
   font-size:14px;
}

.dialog-footer{
   padding:10px;
   text-align:right;
   border-top:1px solid #f0f0f0;
}

.dialog-btn-cancel, .dialog-btn-ok{
   font-size:14px;
   margin-left:10px;
   background-color:#fff;
}

.dialog-btn-ok{
    background-color: #1e90ff;
    color: #fff;
}

默认props属性值：

在Dialog组件中设置相应的默认props属性值，如 visible、title、content、onCancel、 onOk 等。

class Dialog extends Component {
    static defaultProps = {
        visible: false,
        title: '',
        content: '',
        onCancel: () => {},
        onOk: () => {}
    }

    render() {
        const { visible, title, content, onCancel, onOk } = this.props;
        return (
            <div className={visible ? 'dialog-wrap' : 'dialog-wrap hide'}>
                <div className="dialog-content">
                    <div className="dialog-header">{title}</div>
                    <div className="dialog-body">{content}</div>
                    <div className="dialog-footer">
                        <button className="dialog-btn-cancel" onClick={onCancel}>取消</button>
                        <button className="dialog-btn-ok" onClick={onOk}>确定</button>
                    </div>
                </div>
            </div>
        )
    }
}

export default Dialog;

示例二：易用Dialog组件封装

易用Dialog组件封装主要是根据需求定义封装函数，以提高调用Dialog组件时的方便性。

function easyDialog(options) {
    const container = document.body.appendChild(document.createElement('div'));
    const close = () => {
        ReactDOM.unmountComponentAtNode(container);
        container.parentNode.removeChild(container);
    }
    ReactDOM.render(<Dialog visible={true} {...options} onCancel={close} onOk={close} />, container);
    return close;
}

在上述代码中，我们将Dialog组件封装成easyDialog函数，用以快速、方便地使用Dialog组件，同时也扩展了Dialog的一些其他属性。

调用示例：

import Dialog from 'components/Dialog/Dialog';
import easyDialog from 'components/Dialog/easyDialog';

class App extends Component {
    handleClick() {
        easyDialog({
            title: '提示',
            content: '确定删除吗？',
            onOk: () => {
                // 处理删除逻辑
            }
        });
    }

    render() {
        return (
            <button onClick={this.handleClick.bind(this)}>删除</button>
        )
    }
}