React Portal - 弹出层的优秀解决方案
对于需要使用弹出层的需求 ,Portal
可以说是提供了一种完美的解决方案。相比于React Native
中的实现更多的使用Modal
或者绝对定位,Portal
实在是简易友好得多。
场景
对话框,确认提示框,悬浮窗这些组件,一般都要做一个比当前视图层层级更高的View
,但是现有的方案都很难跳出父容器的约束。如何破除这个约束?
Portal
提供了一种将子节点渲染到存在于父组件以外的DOM
节点的优秀的方案
子节点可以被渲染到父组件之外的DOM
上,这不就是解除了这个约束了吗?
Portal:传送门。steam上有一款名为 Portal2 的游戏,互相利用传送门进行位移的配合闯关游戏,传送的含义和这里颇为相似,不过这里是“传送”组件。
使用和效果
普通的 render 方法就是将组件内的元素挂载到最近的DOM节点中。而 Portal 则通过一个API,将元素挂载到任意有效的DOM节点上。
ReactDOM.createPortal( children,container,key? )
具体参数类型如下:
现在开始在代码中使用:
在
public
目录下的index.html
文件中,设置<div id="modal"></div>
。后面 React 元素会被放到modal
这个div
里,这个DOM
元素就是container
。<div id="root"></div>
<div id="modal"></div>
对该 API 做简单封装,构建
Modal
组件。因为Portal API
是读children
子组件的,所以Portal
肯定是作为容器来用。(这里直接操作操作了
children
,你也可以像Portal文档一样,在其中多加一个div
层级隔离)const modalDivElement = document.getElementById("modal"); export default function Modal({ children }) {
return ReactDOM.createPortal(children, modalDivElement);
}
使用
createPortal API
,Modal 组件中的子元素children
会被渲染到modalDivElement
中,而不管你的Modal
在何处使用。使用
Modal
组件。在红色背景div
中嵌入了Modal
,Modal
中只有一个div
字符串zhangsan
。export default function App() {
return (
<div style={{ backgroundColor: "#a00", width: `200px`, height: `100px` }}>
<Modal>
<div>zhangsan</div>
</Modal>
</div>
);
}
现在来看看效果:
如果没有
Modal
层级,zhanghsan
是应该在红色区域里面的。但是为什么加了Modal
就在外面了?这时检查渲染结构,秘密就在这里:可以看到,
Modal
中的元素被渲染到了id="modal"
的这个div
里。来回顾一下发生了什么,我们的代码组件结构是这样:<div id="root">
<div style={{ backgroundColor: "#a00", width: `200px`, height: `100px` }}>
<Modal>
<div>zhangsan</div>
</Modal>
</div>
</div>
<div id="modal"></div>
但是实际的渲染结构却是这样(观察其中
Modal
子元素的变化):<div id="root">
<div style={{ backgroundColor: "#a00", width: `200px`, height: `100px` }</div>
</div>
<div id="modal">
<div>zhangsan</div>
</div>
实际渲染结构和代码结构并不一致了 ,是因为
Modal
中的Portal
将子元素方法放到了指定的container
中。子元素被跨层级渲染,就像被传送过去一样,这便是Portal
。
制作一个 Modal 弹出框组件
上面只是演示了Portal
传送子组件的效果,如果要做到弹出蒙层的效果,只需要在需要传送的children
子元素上添加一个div
包裹并添加样式,如果弹出层样式一致,可以直接Modal
组件中,当然也可以在具体的children
中实现并自定义样式。
实例:
例子代码:
export default function App() {
const [isShow, setIsShow] = useState(false);
function click(e) {
console.info("e", e);
setIsShow(!isShow);
}
return (
<div
style={{
backgroundColor: "#a00",
width: `200px`,
height: `100px`,
}}
onClick={click}
>
{isShow && (
<Modal>
<span>zhangsan</span>
</Modal>
)}
</div>
);
}
Modal
组件:
const modalDivElement = document.getElementById("modal");
export default function Modal({ children }) {
const modalContent = (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: `rgba(0, 0, 0, 0.5)`,
}}
>
{children}
</div>
);
return ReactDOM.createPortal(modalContent, modalDivElement);
}
如果Modal
交互和内容切换较多,可以进一步封装后通过ref
命令式的调用,动态传入Modal
和子组件切换。
Portal 事件冒泡
Portal
中的事件冒泡是遵从React
结构的,并不是实际渲染的DOM
元素结构,也就是说上面的root
节点可以获取到modal
中冒泡出来的事件。
而,上面的页面中的click
事件,可以获取点击红色区域触发Modal
的事件,也能获取到Modal
内部的点击span
的事件:
这样,Modal
中的交互控制并没有脱离当前的页面或组件,和没有使用Portal
时的事件表现一致。
React Portal - 弹出层的优秀解决方案的更多相关文章
- layer弹出层不居中解决方案
layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>
- layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...
- layer弹出层不居中解决方案,仅显示遮罩,没有弹窗
问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...
- layer弹出层不居中解决方案(转)
@感谢参考文章 原文内容: 一.问题描述 用layer做操作结果提示时,发现如果页面超出屏幕的高度时,弹出的提示不是屏幕居中,而是在页面高度的中间,如果一个页面的高度比较大,就看不到提示了. 还有一种 ...
- react学习之弹出层
react的弹出层不同于以往的DOM编程,我们知道,在DOM中,弹出层事件绑定在对应的节点上即可,但是在react中,往往只能实现父子之间的传递控制,显然,弹出层的层级不符合此关系. 在这里我们需要使 ...
- layer 弹出层 不居中
layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>
- React native 的弹出层(输入)效果
/*弹出层测试*/ import React,{Component} from 'react'; import { StyleSheet, View, Image, Text, TouchableOp ...
- 利用React/anu编写一个弹出层
本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...
- react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
随机推荐
- Jmeter(三十七) - 从入门到精通进阶篇 - 输出HTML格式的性能测试报告(详解教程)
1.简介 相对于Loadrunner,Jmeter其实也是可以有测试报告产出的,虽然一般都不用(没有Loadrunner的报告那么强大是一方面),但是有小伙伴们私下问,那宏哥还是顺手写一下吧,今天我们 ...
- linux:搭建java web环境
介绍 运行java web的环境 搭建 准备 Linux:Linux 操作系统 Apache Tomcat:Web 应用服务器 JDK:Java 开发工具包 jdk的安装 1.下载 链接 2.上传服务 ...
- (九)整合 ElasticSearch框架,实现高性能搜索引擎
整合 ElasticSearch框架,实现高性能搜索引擎 1.SpringBoot整合ElasticSearch 1.1 核心依赖 1.2 配置文件 1.3 实体类配置 1.4 数据交互层 1.5 演 ...
- 客户端负载均衡Ribbon
客户端负载均衡Ribbon 一.Ribbon是什么 二.Ribbon实现客户端负载均衡 三.Ribbon负载均衡策略 四.Rest请求模板类解读 4.1 RestTemplate的GET请求 第一种: ...
- Java——StringBuffer,String总结
StringBuffer介绍: Java StringBuffer和StringBuilder类 当对字符串进行修改的时候,需要使用StringBuffer和StringBuilder类. Strin ...
- KVM (虚拟机创建及管理,存储管理)
创建KVM虚拟机 1.图形化界面创建 第一步:查看软件包组 yum grouplist 第二步:下载GUI界面的软件包组 yum groupinstall "Server with GUI& ...
- 21.iptables
1.策略与规则链 iptables 服务把用于处理或过滤流量的策略条目称之为规则,多条规则可以组成一个规则链,而规则链则依据数据包处理位置的不同进行分类,具体如下: 在进行路由选择前处理数据包(PRE ...
- SQL系列总结——基础篇(三)
之前的两篇文章SQL系列总结:<基础篇一>, <基础篇二>已经介绍了一些基本的数据库知识.现在让我们来从头开始构建一个数据库.到管理数据库和对象. 架构开始! 1.创建 ...
- JVM之JVM体系结构
JVM是运行在操作系统之上的,它与硬件没有直接的交互 下图运行时数据区灰色代表线程私有,亮色(方法区和堆)代表所有线程共享. 1.类装载器ClassLoader 负责加载class文件,class文件 ...
- HDU6532 Chessboard (最大费用流)
题意:棋盘上有n个棋子 每个棋子都有收益 现在给定1e5条线 有横着的 竖着的 规定只能在线的一侧选最多ki个棋子 问最大收益 题解:写自闭的一道题 很容易想到是网络流 但是建图有点难 第一道最大费用 ...