[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 ...
随机推荐
- USACO2002 Open:雄伟的山峦
简要题意: 奶牛们在落基山下避暑,从它们的房子向外望去,可以看到N 座山峰构成的山峦,奶牛发现每座山峰都是等腰三角形,底边长度恰好是高度的两倍.所以山峰的顶点坐标可由两个底部端点求出.设i 座第山峰的 ...
- ADO.NET数据读取封装
public class sqlserver { //private string sqlstr = System.ConfigurationManager.ConnectionStrings[&qu ...
- Python(四) 分支、循环、条件与枚举
一.什么是表达式 表达式(Expression)是运算符(operator)和操作数(operand)所构成的序列 二.表达式的优先级 三.表达式优先级练习 优先级同级 从左往右计算 1 or 2 a ...
- org.w3c.dom.Document 与org.dom4j.Document互转
public static Document parse(org.w3c.dom.Document doc) throws Exception { if (doc == null) { return ...
- JAVA使用Gson解析json数据，实例
封装类Attribute: public class Attribute { private int id; private String name; private int age; public ...
- vmware-images
https://virtualboxes.org/images/centos/ https://www.osboxes.org/vmware-images/
- 使用acme.sh快速生成SSL证书
起因 早上收到了一封来自MySSL EE <noreply@notify.myssl.com>的邮件提示证书即将过期, 少于7天,但是acme.sh应该是60天自动renew的.于是查看下 ...
- Rails + rabl
当我们使用rails generate scaffold的方式生成MVC的时候,rails会自己主动给我们生成一系列的文件,包含了怎样用json显示model的view.这样事实上默认了你的系统是一个 ...
- 大型情感类电视连续剧--Android高德之旅（2）地图类型
总要说两句 今天继续我们的Android高德之旅,上一篇已经能够显示最主要的地图了.有主要的放大缩小功能.还有最后做的点击3D旋转.倾斜视角的效果.今天这篇文章来记录一下高德地图的5种地图类型. (其 ...
- 你如何理解 HTML5 的 section？会在什么场景使用？为什么这些场景使用 section 而不是 div？
section元素表示文档或应用的一个部分.所谓“部分”,这里是指按照主题分组的内容区域,通常会带有标题.[也就是每个section对应不同的主题.注意是内容本身的主题,而不是其他人为设定的划分标准. ...