如何用React写一个Modal组件

要求： 组件讲究的是复用性，和可移植性。

可复用:就是要做到组件逻辑功能和业务逻辑功能互不影响也就是所谓的解藕。

可移植:就是要做到软件（组件）与系统无关，也就是没有外部依赖。

纯函数组件也称无状态组件在这里得到了很好的应用。

最简单的纯函数组件

const text = props=><span>{props.text}span>
复制代码

思路： Modal 的实现思路极其简单

const Modal = props=>props.visibale ? <MyModal/> : null
复制代码

数据采用从父组件接收 props 的方式获取而不采用 state 能实现 Modal 组件视图与数据的分离，除了耦合从而达到了可复用的目的。

只需将 props 中的

title （标题）

content （内容）

onOk (确认事件)

onCancel （取消事件）

按照一定的逻辑放置在 Modal 中即可

（当然还有其他的参数比如 width height 就不一一列举）

以下是我的实现：

实现:

Modal.jsx 文件

import React from 'react'
import './Modal.css'

const Modal = props => props.visible ? (<div className="modal-box" style={{backgroundColor:`rgba(0, 0, 0, ${props.opacity})`}}>
<div className="modal-content" style={{width:props.width,height:props.height}}>
    <div className={props.titleClass}>{props.title}div>
    <div className={props.contentClass}>{props.content}div>
    <div className={props.footerClass}>
        <div onClick={props.onOk} className={props.okClass}>{props.conFirmText}div>
        <div onClick={props.onCancel} className={props.cancelClass}>{props.cancelText}div>
    div>
div>
div>) : null

const noop = _=> undefined

Modal.defaultProps = {
    onOk: noop,
    onCancel: noop,
    conFirmText: '确定',
    cancelText: '取消',
    titleClass: 'modal-title',
    contentClass: 'modal-text',
    footerClass: 'modal-footer',
    okClass: 'modal-confirm',
    cancelClass: 'modal-cancel',
    height:'auto',
    width:'400px',
    opacity: 0.6
}

export default Modal
复制代码

Modal.css 文件

.modal-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    /* background-color: rgba(0, 0, 0, 0.8); */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    min-width: 400px;
    background-color: white;
    padding: 40px;
    box-sizing: border-box;
}

.modal-title{
    font-weight: bold;
    font-size: 22px
}

.modal-text {
    font-size: 16px;
}

.modal-footer {
    
}

.modal-confirm,.modal-cancel {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    bottom: 40px;
}

.modal-confirm {
    left: 40px;
}

.modal-cancel {
    right: 40px;
}
复制代码

使用方式:

属性	说明	默认值	类型
onOk	点击确定的回调函数	noop	function
onCancel	点击取消的回调函数	noop	function
conFirmText	确定按钮自定义文字	'确定'	string
cancelText	取消按钮自定义文字	'取消'	string
titleClass	对话框 title 自定义样式	'modal-title'	string
contentClass	对话框内容自定义样式	'modal-text'	string
footerClass	对话框确定取消按钮容器自定义样式	'modal-footer	string
okClass	对话框确定按钮自定义样式	'modal-confirm'	string
cancelClass	对话框取消按钮自定义样式	'modal-cancel'	string
height	对话框宽度	'auto'	string
width	对话框高度	'400px'	string
opacity	对话框透明度	0.6	nunmber

demo.js 文件

import React, { Component } from 'react';
import './App.css';
import Modal from './Modal/Modal.jsx'
class App extends Component {
  constructor(){
    super()
    this.state = {
      title: 'React Modal',
      content: '欢迎使用！',
      visible: false
    }
  }
  openModal(){
    this.setState({
      visible: true
    })
  }
  onOk(){
    this.setState({
      visible:false
    })
  }
  onCancel(){
    this.setState({
      visible:false
    })
  }
  render() {
    return (
      <div className="App">
        <div onClick={this.openModal.bind(this)}>开启弹窗div>
        <Modal 
        width={'600px'}
        height={'600px'}
        visible={this.state.visible}
        title={this.state.title} 
        content={this.state.content} 
        onOk={this.onOk.bind(this)} 
        opacit={0.66}
        onCancel={this.onCancel.bind(this)}/>
      div>
    );
  }
}

export default App;
复制代码

原文链接及源码

转载于:https://juejin.im/post/5cab6d6b6fb9a068b3676fec