赵走x博客 - 开发者的网上家园

42、构建实例应用：组件：对话框

资源编号:76095 书籍 React快速上手开发热度：98

接下来建立一个通用的对话框组件，用于显示所有的消息通知（代替alert()）或弹出窗口（如图6-9 所示）。比如在添加/ 编辑表单时，需要在数据表格的顶部显示一个模态对话框。

![bs64](https://img.handsomemark.com/2019/11/18/193ca046-09ba-11ea-954a-0242ac140002.png)
图6-9：对话框
具体用法：
```
<Dialog header="No cancel,custom button"
                hasCancel={false}
                confirmLabel="Whatever"
                onAction={type=>alert(type)}>
            Anything goes here,see:
            <Button>A Button</Button>
        </Dialog>
```
该组件的实现方式和`<Actions>` 类似——没有状态（只需实现render() 方法），而且用户点击对话框的底部按钮时，将会触发onAction 回调函数。
```
import React from 'react'
// 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。
import PropTypes from 'prop-types'
import Button from './Button'

class Dialog extends Component{
}

Dialog.propTypes={
    header:PropTypes.string.isRequired,
    confirmLabel:PropTypes.string,
    modal:PropTypes.bool,
    onAction:PropTypes.func,
    hasCancel:PropTypes.bool
};

Dialog.defaultProps={
    confirmLabel:'ok',
    modal:false,
    onAction:()=>{},
    hasCancel:true
};

export default Dialog
```
然而，这个组件是通过类定义的，而非箭头函数，因为该组件需要定义两个额外的生命周期方法：

```
componentWillUnmount(){
        document.body.classList.add('DialogModalOpen');
    }
    componentDidMount(){
        if(this.props.modal){
            document.body.classList.add('DialogModalOpen');
        }
    }
```
在显示模态对话框时，需要给document.body 添加一个类名，以便控制整个页面的样式（添加一个灰色的蒙层）。
最后，render() 方法负责把模态框的包裹层、头部、内容区域以及底部组合起来。内容区域可以容纳其他任何组件（或者纯文本）；对话框本身没有对内容作过多限制：
```
render(){
        return (
            <div className={this.props.modal?'Dialog DialogModal':'Dialog'}>
                <div className={this.props.modal?'DialogModalWrap':null}>
                    <div className="DialogHeader">{this.props.header}</div>
                    <div className="DialogBody">{this.props.children}</div>
                    <div className="DialogFooter">
                        {this.props.hasCancel?
                            <span className="DialogDimiss" 
                                  onClick={this.props.onAction.bind(this,'dismiss')}></span>
                            :null
                        }
                        <Button onClick={this.props.onAction.bind(this,
                            this.props.hasCancel?'confirm':'dismiss')}>
                            {this.props.confirmLabel}
                        </Button>
                    </div>
                </div>
            </div>
        );
    }
```
此外还有一些优化点，供读者思考。

* 除了提供单个onAction 属性以外，另一种方案是分别提供onConfirm（用户点击确认按钮触发）以及onDismiss（用户点击取消按钮触发）。
*  一个可优化的点是在用户按下Esc 键时关闭模态框。你有办法实现这个功能吗？
* 包裹层的div 的类名需要进行条件判断，可以借助classnames 模块进行优化，用法如下所示。
修改前：
```
<div className={this.props.modal ? 'Dialog DialogModal' : 'Dialog'}>
```
修改后：
```
<div className={classNames({
'Dialog': true,
'DialogModal': this.props.modal,
})}>
```