React15.6.0实现Modal弹层组件

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

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

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

本文适合对象

  1. 了解React。
  2. 使用过webpack3。
  3. 熟悉es6语法。

项目说明

项目结构截图

项目运行说明
  1. npm install
  2. npm run start
  3. npm run startfe
  4. 登录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" 
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值