[React] Render Elements Outside the Current React Tree using Portals in React 16
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的更多相关文章
- react hooks & props change & pagination current bug
react hooks & props change & pagination current bug multi tables & pigination bug & ...
- React.render和reactDom.render的区别
刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...
- ReactDom.render和React.render的区别
这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的 ...
- react render
实际上react render方法返回一个虚拟dom 并没有去执行渲染dom 渲染的过程是交给react 去完成的 这就说明了为什么要在所有数据请求完成后才去实现render 这样做也提高了性能.只调 ...
- React Render Callback Pattern(渲染回调模式)
React Render Callback Pattern,渲染回调模式,其实是将this.props.children当做函数来调用. 例如: 要根据user参数确定渲染Loading还是Profi ...
- React render algorithm & Fiber vs Stack
React render algorithm & Fiber vs Stack React 渲染算法 & Fiber vs Stack https://stackoverflow.co ...
- React Creating Elements All In One
React Creating Elements All In One https://reactjs.org/docs/react-api.html#creating-react-elements h ...
- React Transforming Elements All In One
React Transforming Elements All In One https://reactjs.org/docs/react-api.html#transforming-elements ...
- React render twice bug
React render twice bug React bug constructor render twice bug update render twice bug StrictMode htt ...
随机推荐
- DDR工作原理
DDR SDRAM全称为Double Data Rate SDRAM,中文名为“双倍数据流SDRAM”.DDR SDRAM在原有的SDRAM的基础上改进而来.也正因为如此,DDR能够凭借着转产成本优势 ...
- CORS support in Spring Framework--官方
原文地址:https://spring.io/blog/2015/06/08/cors-support-in-spring-framework For security reasons, browse ...
- HDU 1005 Number Sequence（矩阵）
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- Ionic2集成ngx-datatable,ng2-tree第三方控件.md
1. 基本环境配置 1.1. 命令安装相应的依赖 1.2. 在Module定义中引入对应Module 1.3. 引入对应的CSS 2. 简单使用示例验证是否集成成功 2.1. ngx-datatabl ...
- Linq中where查询
Linq的Where操作包括3种形式:简单形式.关系条件形式.First()形式. 1.简单形式: 例:使用where查询在北京的客户 var q = from c in db.Customers ...
- IT人都欠自已一个Lable Page
平时, 你是不是喜欢将一些工作或者技术的网站都会Mark一下.慢慢,自已收藏的标签越来越多.收藏后去查找的比较麻烦,而且不是很方便. 下面的文章是介绍我自已是怎么实现一个简单的Lable Page. ...
- C语言之基本算法39—字符串经典操作
//字符串概念! /* ================================================================== 题目:练习字符串的 1.输入输出 ...
- HDU1788 Chinese remainder theorem again【中国剩余定理】
题目链接: pid=1788">http://acm.hdu.edu.cn/showproblem.php?pid=1788 题目大意: 题眼下边的描写叙述是多余的... 一个正整N除 ...
- SpringBoot与Dubbo整合-项目搭建
本章节建立生产者和消费者来演示dubbo的demo 生产者:springboot-dubbo-provider 和 消费者:springboot-dubbo-consumer 工程配置详解 Apach ...
- javafx progressbar
import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans ...