使用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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 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
PHP4.04简明安装
2006/10/09 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
让焦点自动跳转
2006/07/01 Javascript
javascript replace方法与正则表达式
2008/02/19 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
浅析node.js中close事件
2014/11/26 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
Python的print用法示例
2014/02/11 Python
解析Python中的异常处理
2015/04/28 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
python处理按钮消息的实例详解
2017/07/11 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python写程序统计词频的方法
2019/07/29 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
win10安装python3.6的常见问题
2020/07/01 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
给女儿的表扬信
2014/01/18 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
企业法人授权委托书
2014/09/25 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2014年生产部工作总结
2014/12/17 职场文书
学生检讨书怎么写
2015/05/07 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书