使用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 相关文章推荐
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
常用jQuery代码分享
Jul 14 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 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
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
php生成rss类用法实例
2015/04/14 PHP
php fread读取文件注意事项
2016/09/24 PHP
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
Python易忽视知识点小结
2015/05/25 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python实现俄罗斯方块游戏
2020/03/25 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
学生检讨书怎么写
2014/10/09 职场文书
小学母亲节活动总结
2015/02/10 职场文书
学校捐书倡议书
2015/04/27 职场文书
计算机教师工作总结
2015/08/13 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
MySQL自定义函数及触发器
2022/08/05 MySQL