使用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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
为什么node.js不适合大型项目
Apr 28 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和.net中des加解密的实现方法
2013/02/27 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
HTML的select控件美化
2017/03/27 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python简单日志处理类分享
2015/02/14 Python
Python抓取百度查询结果的方法
2015/07/08 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python分布式计算dispy的使用详解
2019/12/22 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
数据库的约束含义
2012/09/09 面试题
就业表自我评价分享
2014/02/06 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
草房子读书笔记
2015/06/29 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
java泛型通配符详解
2021/07/25 Java/Android