By default the React Component Tree directly maps to the DOM Tree. In some cases when you have UI elements like overlays or loading bars this can be limiting. React 16 therefor ships with the new portal feature allowing you to attach parts of the Component tree inside a different root element.

This lesson explores the new functionality by building an <Overlay/> component that renders out its children and creates a closeable overlay outside its DOM node.

It is important to understand what portals is good for.

Let's see what if we don't have portals:

As we can see, the overlay component is nested inside our wrapper component:

Now let's see what if we use portals:

This time we have created a empty 'overlay-root' div inside the html body.

  <body>

    <div id="root"></div>

    <div id="overlay-root">

    </div>

  </body>

And inside our Overlay compmonet, we render the component into this 'overlay-root' div:

If now we open devtool to see DOM structure:

As we can see Overlay-root is spreated from wrapper component, and it is reuseable and provide a much clean DOM structure.

[React] Render Elements Outside the Current React Tree using Portals in React 16的更多相关文章

  1. react hooks & props change & pagination current bug

    react hooks & props change & pagination current bug multi tables & pigination bug & ...

  2. React.render和reactDom.render的区别

    刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...

  3. ReactDom.render和React.render的区别

    这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的 ...

  4. react render

    实际上react render方法返回一个虚拟dom 并没有去执行渲染dom 渲染的过程是交给react 去完成的 这就说明了为什么要在所有数据请求完成后才去实现render 这样做也提高了性能.只调 ...

  5. React Render Callback Pattern(渲染回调模式)

    React Render Callback Pattern,渲染回调模式,其实是将this.props.children当做函数来调用. 例如: 要根据user参数确定渲染Loading还是Profi ...

  6. React render algorithm & Fiber vs Stack

    React render algorithm & Fiber vs Stack React 渲染算法 & Fiber vs Stack https://stackoverflow.co ...

  7. React Creating Elements All In One

    React Creating Elements All In One https://reactjs.org/docs/react-api.html#creating-react-elements h ...

  8. React Transforming Elements All In One

    React Transforming Elements All In One https://reactjs.org/docs/react-api.html#transforming-elements ...

  9. React render twice bug

    React render twice bug React bug constructor render twice bug update render twice bug StrictMode htt ...

随机推荐

  1. jQuery插件开发初探

    最简单的插件 $.fn.changeStyle = function (colorStr) { $(this).css('color',colorStr); } 应用如下: <!DOCTYPE ...

  2. UVALive - 6269 Digital Clock 模拟

    UVALive - 6269 Digital Clock 题意:时钟坏了,给你一段连续的时间,问你现在可能的时间是多少. 思路:直接模拟,他妈的居然这场就跪在了这题,卧槽,他妈的就在111行,居然多打 ...

  3. Linux中配置网桥

    使用kvm虚拟机时,有时候需要自己添加网桥供guest使用. 不使用libvirt来管理的话,可以使用以下方法创建网桥并绑定到物理网卡(RHEL6/Fedora已实验): 1.创建网桥配置文件ifcf ...

  4. 关于Shiro的退出请求是如何关联到登录请求的思考

    一.结论 先给出结论,是因为本身是很简单的道理.假设我们没有使用任何认证授权的框架,就简单的使用Cookie和HttpSession,那么用户登录后的每一个请求是如何关联上这个用户的呢?答案很简单,由 ...

  5. spring 使用c3po连接池

    1 数据源:能够简单理解为数据的来源. 2 连接池:是缓存一定数量的数据库连接,当程序须要数据库连接的时候,直接在连接池中获取空暇的连接,使用完再放回连接池中,此连接又变成空暇状态,等待下一次连接. ...

  6. 【HDOJ 5384】Danganronpa

    [HDOJ 5384]Danganronpa AC自己主动机. .. 当时感觉用字典树 标神也往自己主动机想来着..手太生加上时间紧迫也没敲--回来一看题解什么AB同一时候建自己主动机...顿时愣了 ...

  7. 目标决定人生——没有目标就失去一切 （没有目标的奋斗是浪费青春，比如交了钱却不去参加考试、让时间白白溜走。根据目标与定位来选择最合适的企业。人生要算总账）good

    没有目标就失去一切 刚毕业那会儿,幼稚得可笑,老跟同学打电话,明面上聊聊近况,暗地里比较.你要比我工资多一百块,心里特不平衡,凭什么呀,在学校那会儿公认的我比你强.你要带个头衔,而我啥也不是,普通员工 ...

  8. JS排序的运用

    排序是一个非常实用的功能,队列也是一样实用. 有时候项目中就是会用到它. 举个例子,队列的运用,比如刷小礼物,接收方,会受到很多用户的礼物.为了公平起见,要一个个的显示出礼物效果.这个时候就需要队列了 ...

  9. 用NPOI、C#操作Excel表格生成班级成绩单

    在C#中利用NPOI操作Excel表格非常方便,几乎上支持所有的Excel表格本身所有的功能,如字体设置.颜色设置.单元格合并.数值计算.页眉页脚等等. 这里准备使用NPOI生成一个班级成绩单Exce ...

  10. Android自定义组件系列【12】——非UI线程绘图SurfaceView

    一.SurfaceView的介绍 在前面我们已经会自定义View,使用canvas绘图,但是View的绘图机制存在一些缺陷. 1.View缺乏双缓冲机制. 2.程序必须重绘整个View上显示的图片,比 ...