当下前端届最火的技术之一莫过于React + Redux + webpack的技术结合。最近公司内部也正在转react,这周主要做了个React的modal组件,接下来谈下具体实现过程。

基本的HTML结构

虽然React基于虚拟DOM,但他的JSX语法还是离不开最基本的HTML。第一步要做的就是通过HTML&&CSS实现Dialog垂直水平居中框。HTML结构如下:

                <div className="m-mask"></div>
<div className="m-dialog">
<div className="md-dialog">
<div className="md-dialog-title">
<h4>{title}</h4>
<span className="btn">
<i className="iconfont">&times;</i>
</span>
</div>
<div className="md-dialog-content">
{this.props.children}
</div>
<div className="md-dialog-foot">
<a href="#" className="btns">取消</a>
<a href="#" className="btns btns-blue">确定</a>
</div>
</div>
</div>

ps: JSX语法的className对应于HTML中的class,其次文中的iconfont图标被换成了&times;

然后写下对应的CSS样式。此处主要说明一下主要的样式布局原理,细节略过。

Modal框的背景mask样式通过position:fixed + top/right/bottom/left:0 + height: 100%实现。

不定宽高的主体内容水平垂直居中的实现通过position:fixed + top/left: 50% + translate(-50%, -50%)实现。

React Modal Component

有了已经想好的布局样式,开始实现最基本的Modal组件。因为需要动态控制组件的显隐,所以组件的显隐在内部要通过state方便控制,而其他属性则通过props实现。modal.js代码如下:

import React, { Component, PropTypes } from 'react'

const defaultProps = {
show: false,
title: '',
zIndex: 1000,
onOk: () => {},
onCancel: () => {},
} const propTypes = {
title: PropTypes.string,
zIndex: PropTypes.number,
onOk: PropTypes.func,
onCancel: PropTypes.func,
} export default class Modal extends Component {
constructor(props) {
super(props)
this.state = {show: props.show}
}
render() {
return (
// JSX语法的HTML
);
}
} Modal.defaultProps = defaultProps
Modal.propTypes = propTypes

不过显隐内部通过state控制,但父组件还是需要通过props传递初始默认值。而且来回调用同一个modal时,父组件是通过props中的show属性控制。内部的state还是第一次调用时传入的props值。这样无法导致及时控制显隐。此时react的componentWillReceiveProps()出场,完美解决这个bug。

俗话说bug是解不完的,虽然上面的组件勉强可以正常使用,但是用于样式通过绝对定位来做的,无形中导致了另外一个坑,如果Modal的父组件采用了相对或者绝对定位,即影响了Modal组件的定位,就会存在Modal出现在了某个div中,而不是理想的body中。bug复现如下:

unstable_renderSubtreeIntoContainer登场

为了保证我们的组件始终处于body中,采取了ReactDOM中的的这个不太正式的API。语法很简单:

ReactDOM.unstable_renderSubtreeIntoContainer(parent, component, dom)

parent一般是this,component是Modal,dom是div

代码实现如下:

export default class extends Component {
appendMaskIntoDoc() {
ReactDOM.unstable_renderSubtreeIntoContainer(
this,
<Modal {...this.props}>
{this.props.children}
</Modal>,
this.container
)
} componentDidMount() {
this.container = document.createElement('div')
document.body.appendChild(this.container)
this.appendMaskIntoDoc()
} componentDidUpdate() {
this.appendMaskIntoDoc()
} componentWillUnmount() {
document.body.removeChild(this.container)
} render() {
return null
}
}
API形式

此时,Modal组件已经成功做出来了。父组件可以成功调用,效果如下:



不过,偷偷see了下蚂蚁金服官网的Modal组件调用,还有一种API形式的调用。于是也简单实现了下。这里,简单说下实现思路吧。

Confirm function内部通过setState方法函数接受的参数传递给Modal的父组件dialog,onOk的promise异步回调则是在dialog内部通过处理之后再传递给Modal组件。

此处我是通过正则表达式检测new Promise,如果属于Promise,则给onOk绑定then,内部调用setState控制Modal的隐藏。不过在调用Confirm function之前,

dialog组件已经被render进ReactDOM中,render之前则需要dom节点,就需要能获取到document节点。然后手动创建空div节点添加到body中。

此处代码有点长,省略咯。

完整的代码已放到github上。https://github.com/qingguoing/react-modal

React对话框组件实现的更多相关文章

  1. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

  2. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  3. Griddle, griddle-react 一个REACT 表格组件

    Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html

  4. React Native组件之Text

    React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...

  5. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  6. artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  7. reactjs入门到实战(七)---- React的组件的生命周期

    React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他     getInitia ...

  8. React Native 组件之TextInput

    React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...

  9. [Python] wxPython 状态栏组件、消息对话框组件 学习总结(原创)

    1.状态栏组件 1.基本介绍 上图: 红框框内的就是状态栏. 他可以分成若干个区块,比如上者分为了两个区块,并且比例是固定的,创建时可以指定 每个区块都能够显示 信息,一般通过 绑定事件 实时更新 各 ...

随机推荐

  1. javaScript数据类型与typeof操作符

    1,typeof操作符. typeof操作符是用来检测变量的数据类型.使用:typeof  变量名;返回以下字符串: 字符串 描述 undefined 未定义 boolean 布尔值 string 字 ...

  2. 用Jekyll在github上写博客——《搭建一个免费的,无限流量的Blog》的注脚

    本来打算买域名,买空间,用wordpress写博客的.后来问了一个师兄,他说他是用github的空间,用Jekyll写博客,说很多人都这么做.于是我就研究了一下. 比较有价值的文章有这么几篇: htt ...

  3. CENTOS 基础指令——查看系统环境

    1.查看内核版本 # cat /proc/version # uname -a # uname -r 2.查看linux版本 # cat /etc/issue # cat /etc/redhat-re ...

  4. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

  5. smartjs - DataManager API

    dataServices 数据服务的管理器:首先看下具体的代码 //数据服务 dataServices = st.factory({ name: "dataServices", p ...

  6. ActionLink()与jquery更好地结合建造MVC网页:

    众所周知,微软的MVC框架提供了一系列Helper以用于创建Ajax的网页. 但是,类似于Ajax.ActionLink()的方法创建的Ajax缺乏足够的灵活性,例如: 页面上有很多选项,我们需要根据 ...

  7. 免费下载:用于原型设计的 iOS 7 线框图

    André Revin 使用 Illustrator 创建 iOS7 iPhone 5 的样机原型.这是一个像素完美的线框样机,可以帮助超级轻松的打造你的原型.你可以免费下载源文件,并在工作中使用. ...

  8. ThroughRain第二次冲刺(每天更新

    第二次冲刺时间: 11月28-12月5号 第一次冲刺目标及分配: 1. 查询点餐界面         认领:梁仕标 2. 链接数据库            认领:冯梓凡 3. 建立数据库的表     ...

  9. Dancing Link --- 模板题 HUST 1017 - Exact cover

    1017 - Exact cover Problem's Link:   http://acm.hust.edu.cn/problem/show/1017 Mean: 给定一个由0-1组成的矩阵,是否 ...

  10. MVC应用程序实现上传文件

    学习MVC以来,一直想实现上传文件的功能,使用jQuery来实现上传,有很多插件.此篇演示中,Insus.NET是使用Uploadify.http://www.uploadify.com/,它有更多的 ...