[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 ...
随机推荐
- Controller接口控制器
1.Controller简介 Controller控制器,是MVC中的部分C,为什么是部分呢?因为此处的控制器主要负责功能处理部分: 1.收集.验证请求参数并绑定到命令对象: 2.将命令对象交给业务对 ...
- AndroidTouchEvent总结
默认状态 布局文件 <?xml version="1.0" encoding="utf-8"?> <com.malinkang.touchsa ...
- spring 中国下载点
http://repo.spring.io/libs-release-local/org/springframework/spring/ spring 中国下载点
- Ubuntu16.04添加HP Laserjet Pro M128fn打印机和驱动
一.全部设置->打印机->添加新打印机 添加打印机 二.选择自动搜索到的网络打印机HP Laserjet Pro M128fn,点击添加. 三.添加打印机完成,打印测试页进行测试. 四. ...
- Microsoft office2016(专业增强版) 安装错误，报CRT(KB2999226)
对着这个错误的出现,网上有解释,这里不多说(实际是我没有找到比较靠谱的说法..),跟Window Update这个服务有关. 首先打开”Windows人为管理器”->"服务" ...
- ES6学习笔记（四）数值的扩展
1.二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503 // true 0o767 === 503 ...
- Scrapy框架之日志等级
一.日志等级 CRITICAL:严重错误 ERROR:一般错误 WARNING:警告 INFO: 一般信息 DEBUG:调试信息 [注意:默认的日志等级是DEBUG] 二.日志等级设置 修改setti ...
- 重新安装python2.6 和 yum （不可以直接安装yum yum 依赖于python2.6）
(升级或卸载Python导致 yum出错) 一: 升级python导致yum出错 1. cd /usr/bin/yum 2. #!/usr/bin/python 修改为 #!/usr/bin ...
- lunix 安装使用mongo
一.下载安装mongo版本客户端 1.进入mongo官网选择需要的版本号: https://www.mongodb.com/download-center/community(官网网址) 2.选择下载 ...
- python全栈_day01
计算机容量 1位 = 1bit 8bit = 1byte = 1字节 1024bytes = 1kbytes =1KB 1024个字符,小文档 ,几百k可以表示一张图片 1024KB ...