[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 ...
随机推荐
- centos中mysql 安装以及配置，建库
1.检测系统内部有没有安装其他的mysql数据库 rpm -qa | grep mysql 然后如果有的话删除这些mysql yum remove 查出来的所有名字 2.彻底删除系统中mysql的目录 ...
- make---GNU编译工具
make命令是GNU的工程化编译工具,用于编译众多相互关联的源代码问价,以实现工程化的管理,提高开发效率. 知识扩展 无论是在linux 还是在Unix环境 中,make都是一个非常重要的编译命令.不 ...
- 使用scatter画散点图
刚开始接触Python,照着例子写的代码,百度注释的. from numpy import * import matplotlib import matplotlib.pyplot as plt im ...
- 在hive执行创建表的命令，遇到异常com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Specified key was too long; max key length is 767 bytes
今天在练习hive的操作时,在创建数据表时,遇到了异常 FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.ex ...
- Java的位运算符——&0xFF的运算与讲解
快放元旦假,没心思做啥的事,就去翻以前的代码遇到这句,但是又不懂,所以只好上网找,终于懂了那么一点点. 所以那个大神看到我说的有问题,请指出!谢谢.... 一:首先区分一下 A~F的意思先 A,代表十 ...
- Floyd-Warshall 算法-- 最短路径（适合节点密集的图）
由于此算法时间复杂度为O(V³).大多数情况下不如迪杰斯特拉算法的.迪杰斯特拉算法适合于节点疏散的图. 演示样例图例如以下: Step 1 创建节点与边的最短路径结果表(直接可达关系).数 ...
- uva725（除法）
Description Write a program that finds and displays all pairs of 5-digit numbers that between them u ...
- android 图片特效处理之 图片叠加
这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...
- es6 -- 透彻掌握Promise的使用，读这篇就够了
Promise的重要性我认为我没有必要多讲,概括起来说就是必须得掌握,而且还要掌握透彻.这篇文章的开头,主要跟大家分析一下,为什么会有Promise出现. 在实际的使用当中,有非常多的应用场景我们不能 ...
- 57.C++处理转义字符
#include <iostream> #include <string> #include <cstdlib> using namespace std; void ...