Reac-18 portal传送门

portal

组件默认会作为父组件的后代渲染到页面中
但是有些情况下这种方式会带来一些问题
通过portal可以将组件渲染到页面中的指定位置
使用方法：
* 1.在index.html添加一个新的元素

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>学习日志</title>
</head>
<body>
<div id="root"></div>
<div id="a-root"></div></body>
</html>

2.修改组件的渲染方式
* 通过ReactDOM.createPortal()作为返回值创建元素
* 参数：
* 1. jsx（修改前return后的代码）
* 2. 目标位置（DOM元素）

import React from 'react';
import ReactDOM from "react-dom";// 获取a-root的根元素
const aRoot = document.getElementById('a-root');const Demo = (props) => {return ReactDOM.createPortal(修改前的jsx代码, apRoot);
};export default Demo ;

遮罩层案例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>学习日志</title>
</head>
<body>
<div id="root"></div><!--这个容器专门用来渲染遮罩层-->
<div id="backdrop-root"></div></body>
</html>

import React from 'react';
import './Backdrop.css';
import ReactDOM from "react-dom";// 获取backdrop的根元素
const backdropRoot = document.getElementById('backdrop-root');const Backdrop = (props) => {return ReactDOM.createPortal(<div className="backdrop">{props.children}</div>, backdropRoot);
};export default Backdrop;

遮罩层样式可以自己设计这里只提供参考

.backdrop{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,.3);z-index: 9999;
}

在要使用的组件上套上这个组件标签就可以了

import Backdrop from "../Backdrop/Backdrop";const ConfirmModal = props => {return <Backdrop>原来组件的jsx代码</Backdrop>;
};export default ConfirmModal;

Reac-18 portal传送门相关推荐

react全家桶实战（千峰教育）
说明:本笔记为本人基于千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版的学习笔记,知识点不清或不全,可以到视频教程中学习文章目录一.安装create-react-app ...
[react] 举例说明React的插槽有哪些运用场景
[react] 举例说明React的插槽有哪些运用场景我觉得这里的插槽,指的应该是组合组件,而不是portal(传送门),因为对比vue中的插槽,只是父组件在子组件中间加入一系列的内容,然后子组件可 ...
Codeforces Round #439 (Div. 2)
一句话题意: A:传送门题意:给定两个长为\(n\)的数组\(a\),\(b\),令\(ans=\)有序对\((i,j)\)的个数使得\(a_i\ xor\ b_j\)在这\(2n\)个数中出现过, ...
H12-723题库-个人整理笔记
H12-723: Agile Controller-Campus 系统架构属于 C/S 架构. A.正确 B.错误答案:B Agile Controller-Campus 系统架构属于 B/S 架构 ...
python代码库-吐血整理！绝不能错过的24个Python库
Python有以下三个特点: 易用性和灵活性全行业高接受度:Python无疑是业界最流行的数据科学语言用于数据科学的Python库的数量优势事实上,由于Python库种类很多,要跟上其发展速度非 ...
图论500题慢慢写
题目来源 https://blog.csdn.net/ffq5050139/article/details/7832991 这篇博客用来记录自己刷的图论题先占个坑所有题目都来自上面的链接会慢慢更 ...
linux 游戏大作,20款值得一试外媒盘点Mac平台游戏大作
原标题:20款值得一试外媒盘点Mac平台游戏大作外媒为我们盘点了最好玩的20款将Mac游戏,这些游戏不止在Mac上,多数平台均已支持,在Mac上体验更佳,感兴趣的朋友一起来试试看吧.(图片来自te ...
ui设计网站：全网最热门的30个UI设计网站合集
转载一篇ui设计网站整理的文章 1．UI Garage 传送门:https://uigarage.net/ UI设计灵感炸裂之地,每日精心挑选UI灵感和模式,可以从平台.排序方式.类别.日期等分类筛选 ...
视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...

Reac-18 portal传送门

portal

遮罩层案例

Reac-18 portal传送门相关推荐

最新文章

热门文章