[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 ...
随机推荐
- TortoiseSvn安装的时候，将svn的命令行工具单独隔离出来
https://stackoverflow.com/questions/2967176/where-is-svn-exe-in-my-machine The subversion program co ...
- Android View体系（十）自定义组合控件
相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源 ...
- CentOS 与Ubuntu 安装软件包的对比
工作需要开始转向centos,简单记录软件包安装 wget不是安装方式 他是一种下载软件类似与迅雷 如果要下载一个软件 我们可以直接 wget 下载地址 ap-get是ubuntu下的一个软件安装方式 ...
- 2015北京网络赛 G Boxes BFS+打表
G Boxes 题意:n个位置摆有n个箱子,每次移动只能把相邻的垒起来,且上面的必须小于下面的.求摆成升序需要移动多少步. 思路:这里的n很小,只有7.但是bfs最快的情况需要2s左右,所以就打表了. ...
- POJ Euro Efficiency 1252
Euro Efficiency Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4109 Accepted: 1754 D ...
- Oracle 删除重复数据的几种方法
去重 第一种:distinct create table tmp_t3 as select distinct * from t3; drop table t3; alter table tmp_t2 ...
- DEDECMS教程：列表页缩略图随机调用
如果用过DEDECMS的朋友应该都知道,有些模板列表页面需要用到缩略图,调用内容中的缩略图可以使用系统自带的脚本调用第一张图片.但是,并不是我们所有的内容里都有图片,有时候第一张图片也不一定是适合尺寸 ...
- 网络场景图WebScene介绍
网络场景图的创建同样需要ID,然后再放入3维的地图底图中. 1.创建一个新的网络场景图 "esri/WebScene" var scene = new WebScene({ por ...
- Linux登陆类型-Linux中如何临时配置IP
Linux登录: 本地登录,直接在Linux主机上接上键盘显示器,然后输入用户名密码登录 远程登录,通过网络进行登录(需要IP 账户名 密码) windows中远程登录软件有 xshell.putty ...
- java之 ------ 几种常见的简单设计模式
前言: 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.用于解决特定环境下.反复出现的特定问题的解决方式.使用设计模式是为了可重用代码.让代 ...