使用React手写一个对话框或模态框的方法示例


Posted in Javascript onApril 25, 2019

打算用React写对话框已经很长一段时间,现在是时候兑现承诺了。实际上,写起来相当简单。

核心在于使用React的接口React.createPortal(element, domContainer)。该接口将element渲染后的DOM节点嵌入domContainer(通常是document.body),并保证只嵌入一次。

所以,我们可以这样写一个对话框或模态框:

function Dialog() {
  return React.createPortal( <div>Dialog contents</div>, document.body )
}

一个新的div会出现在body内部:

使用React手写一个对话框或模态框的方法示例

一个完整DEMO:

使用React手写一个对话框或模态框的方法示例

点击运行DEMO

class Modal extends React.Component {
 render() {
  const {
   visible,
   onClose
  } = this.props
  return visible && ReactDOM.createPortal(<StyledModalRoot>
   <div className="box">
    Content
    <br/>
    <button onClick={onClose}>Close</button>
   </div>
  </StyledModalRoot>, document.body)
 }
}

class App extends React.Component {
 state = {
  visibleModal: false
 }
 showModal = () => this.setState( { visibleModal: true } )
 handleCloseModal = () => this.setState( { visibleModal: false } )
 render() {
  const { visibleModal } = this.state
  return <div style={{padding: '20px'}}>
  <button onClick={ this.showModal }>Show Modal</button>
  <Modal visible={visibleModal} onClose={ this.handleCloseModal } />
 </div>
 }
}

const StyledModalRoot = styled.div`
 position: fixed;
 z-index: 1001;
 left: 0;
 top: 0;
 display: grid;
 place-items: center;
 width: 100%;
 height: 100%;
 background: rgba( 0, 0, 0, 0.2 );

 >.box {
  position: relative;
  display: grid;
  place-items: center;
  width: 80%;
  height: 80%;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
 }
`

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 #Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 #Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 #Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 #Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 #Javascript
微信小程序实现的五星评价功能示例
Apr 25 #Javascript
微信小程序实现单列下拉菜单效果
Apr 25 #Javascript
You might like
对javascript和select部件的结合运用
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
小学音乐教学反思
2014/02/05 职场文书
爱心倡议书范文
2014/05/12 职场文书
庆元旦活动总结
2014/07/09 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年施工员工作总结
2014/11/18 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书