使用React手写一个对话框或模态框

Taste 发布于2019-08-26 18:24 / 2539人阅读

摘要：打算用写对话框已经很长一段时间，现在是时候兑现承诺了。核心在于使用的接口。该接口将渲染后的节点嵌入通常是，并保证只嵌入一次。所以，我们可以这样写一个对话框或模态框一个新的会出现在内部一个完整点击运行感谢你花时间阅读这篇文章。

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

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

欢迎订阅我的博客。

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

function Dialog() {
    return React.createPortal( Dialog contents, document.body )
}

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

一个完整DEMO:

点击运行DEMO

class Modal extends React.Component {
  render() {
    const {
      visible,
      onClose
    } = this.props
    return visible && ReactDOM.createPortal(
      
        Content
        

        
      
    , 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 
    
    
  
  }
}

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);
  }
`

感谢你花时间阅读这篇文章。如果你喜欢这篇文章,欢迎点赞、收藏和分享，让更多的人看到这篇文章，这也是对我最大的鼓励和支持！
欢迎在Star和订阅我的原创前端技术博客。

云服务器 GPU云服务器 H5注册模态框 html 模态框锚点如何用js实现模态框 js 向模态框写内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110185.html

用vue实现模态框组件

摘要：组件结构头部内容区域尾部操作按钮模态框结构分为三部分，分别为头部内部区域和操作区域，都提供了，可以根据需要定制。调用点击确定按钮的回调处理点击取消按钮的回调处理用创建一个索引就很方便拿到模态框组件内部的方法了。基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实...

mrcode 2019-08-21 14:28 评论0 收藏0
写一个单例构造的对话框

摘要：前言项目中，当需要用户处理事务，又不希望跳转页面以致打断工作流程时，我们会经常使用到对话框去承载相应的操作。虽然用得多，但是很多人其实并不知道怎么去写。饶有兴趣，自己尝试写了一个。前言项目中，当需要用户处理事务，又不希望跳转页面以致打断工作流程时，我们会经常使用到对话框去承载相应的操作。虽然用得多，但是很多人其实并不知道怎么去写。饶有兴趣，自己尝试写了一个。 API 参数 ...

weknow619 2019-08-22 18:02 评论0 收藏0
移动弹窗基础知识浅析——IOS弹窗体系

摘要：尤其是遇到二次确认等场景因此，打算从头整理移动弹窗的基础知识，以弹窗体系为切入点，从定义出发，对移动弹窗进行分类，然后分别分析每一类弹窗的应用场景，以及在使用过程中需要注意的点。摘要：最为常见的【弹窗】反而是最捉摸不定的东西。各种类型的弹窗傻傻分不清楚，不知道在什么场景下应该用哪种弹窗。尤其是遇到二次确认等场景…… 因此，打算从头整理移动弹窗的基础知识，以iOS弹窗体系为切入点，从...

jas0n 2019-06-28 10:58 评论0 收藏0