使用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 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
详解nvm管理多版本node踩坑
Jul 26 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页面运行时间的函数介绍
2013/07/01 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
js实现随机点名程序
2020/09/17 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
十八届三中全会个人学习材料
2014/02/13 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
租房协议书样本
2014/08/20 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
学校食堂管理制度
2015/08/04 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers