React15.6.0实现Modal弹层组件

最新推荐文章于 2024-07-30 16:16:33 发布

findhappy117

最新推荐文章于 2024-07-30 16:16:33 发布

阅读量5.2k

点赞数

文章标签：对象弹层 react

本文链接：https://blog.csdn.net/findhappy117/article/details/79724094

版权

本文适合React、webpack3和es6语法熟悉者，讲解如何在React15.6.0中实现Modal弹层组件，包括组件分析、静态组件、挂载方法、控制器和动画效果。通过实例代码展示了Modal组件的基础结构、接口设计、动画实现及控制器逻辑，适合React初学者参考。

摘要由CSDN通过智能技术生成

代码地址如下：
http://www.demodashi.com/demo/12315.html

注：本文Demo环境使用的是我平时开发用的配置：这里是地址。

本文适合对象

了解React。
使用过webpack3。
熟悉es6语法。

项目说明

项目结构截图

项目运行说明

npm install
npm run start
npm run startfe
登录localhost:8088查看demo

Modal组件分析

Modal组件是属于一个网站中比较常用的基础组件，但是在实现方面上稍微复杂一些，对场景支持的需求度较高。

这里是Antd中Modal组件的演示Demo。

首先分析这个组件的组成结构：
1. title Modal弹层的标题部分。
2. content Modal弹层的主体部分。
3. footer Modal弹层最后的button部分。
4. background 整个黑色背景

其次，这个弹层不能生硬的出现，所以一定要有动画效果。

最后，弹层是在合适的地方通过用户交互的形式出现的，所以又一个控制器来控制Modal弹层的出现和关闭。

Modal组件的实现

静态组件

首先来思考如何实现静态组件部分的代码。

先在components下面创建我们的modal组件结构。
- -components/
- -modal/
- -modal.js
- -modal.scss

这里样式文件使用scss，如果不熟悉的同学可以使用css代替或者先学习一下scss语法规则。

在modal.js中创建出组件的基础部分。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './modal.scss';

export default class Modal extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>Modal</div>
        );
    }
}

Modal.propTypes = {};
Modal.defaultProps = {};

接下来分析我们的组件都需要预留哪些接口：
1. 开关状态isOpen
2. Modal标题title
3. Modal主体内容children
4. Modal类名className
5. 点击黑色区域是否可以关闭maskClosable
6. 关闭按钮文案 cancelText
7. 确认按钮文案 okText
8. 关闭按钮回调函数 onCancel
9. 确认按钮回调函数 onOk

目前能想到的接口有这些，接下来我们可以补充一下我们的代码。

// 刚才的代码部分
Modal.propTypes = {
    isOpen: PropTypes.bool.isRequired,
    title: PropTypes.string.isRequired,
    children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
    className: PropTypes.string,
    maskClosable: PropTypes.bool,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    okText: PropTypes.string,
    cancelText: PropTypes.string
};

Modal.defaultProps = {
    className: '',
    maskClosable: true,
    onCancel: () => {},
    onOk: () => {},
    okText: 'OK',
    cancelText: 'Cancel'
};

定义好接口之后，我们可以根据我们的接口来完善一下Modal组件。

export default class Modal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: props.isOpen || false
        };
    }
    componentWillReceiveProps(nextProps) {
        if('isOpen' in nextProps) {
          this.setState({
            isOpen: nextProps.isOpen
          });
        }
  }
    render() {
        const {
            title,
            children,
            className,
            okText,
            cancelText,
            onOk,
            onCancel,
            maskClosable
        } = this.props;
        return (
            <div className={`mocal-container ${
    className}`}>
                <div className="modal-body">
                    <div className={`modal-title ${
    type}`}>{title}</div>
                <div className="modal-content">{children}</div>
                <div className="modal-footer">
                    <button className="ok-btn" onClick={onOk}>{okText}</button>
                    <button className="cancel-btn"