首页 > 其他分享 >react笔记之学习之使用portal修改项目

react笔记之学习之使用portal修改项目

时间:2023-02-11 12:04:41浏览次数:48  
标签:const 歌谣 前端 笔记 react portal import Backdrop


前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

react笔记之学习之使用portal修改项目_javascript

第一步index.html

<!--这个容器专门用来渲染遮罩层-->
<div id="backdrop-root"></div>

第二步

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;


标签:const,歌谣,前端,笔记,react,portal,import,Backdrop
From: https://blog.51cto.com/u_15460007/6050161

相关文章

  • react笔记之学习之空列表提示
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • 【学习笔记】IOC的推导及本质
    IOC的推导及本质 1.IOC理论推导原来要实现一个业务,需要Service接口、ServiceImpl、Dao接口、DaoImpl如下:UserDao接口:packagecom.wang.dao;​publicinterfaceU......
  • Flutter笔记-基础组件
    加载网络图片以及本地图片Image(image:NetworkImage("https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB12IU4R.img?w=8......
  • 微分学习笔记
    微分学习笔记注意,本人太菜了,只是写下自己的理解,所以可能有很多表述错误、不清晰的地方,请指正。简介好文!用来学习多项式、生成函数的工具。我们知道微积分,而所谓微分就......
  • 日常笔记——工程师之路
    努力成为工程师1.早来晚走(员工)2.站在领导角度思考问题(领导)3.把公司当做自己的来做(创始人)4.坚持1-3条4到5年工作必备技能:windows三剑客:word、PPT、EXEL定期汇......
  • 搜索与回溯算法笔记
    目录搜索与回溯算法  迷宫问题:例5.1素数环:将1到20这20个数摆成一个环,要求相邻的两个数的和是一个素数。例5.2:设有n个整数的集合{1,2,……,n},从中任意取出r个数进行排列(r<n),试......
  • 斯特林数学习笔记
    斯特林数学习笔记注:本篇只为作者自己看懂,方便以后复习。注意:如无特殊说明,以下公式的范围皆为\(n\ge0\)且\(n\)为整数。因为我太菜啦,所以很多东西都只有最浅显的部分......
  • PLC入门笔记5
    定时器指令及其应用定时器指令介绍设备启动预热时间、化学反应时间、电机星三角转换时间?我们需要定时器。PLC计时器指令由时间续电器演变而来。定时器本质是一个输出指......
  • 《分布式技术原理与算法解析》学习笔记Day07
    分布式锁什么是分布式锁?为了实现分布式互斥,我们需要在某个地方做个标记,这个标记是每个线程都可以看到,当标记不存在时可以设置该标记,当标记被设置后,其他线程只能等待拥有......
  • 关于顺达react主管笔记之学习之创建表单
    顺达主管86378678是当回事的发挥importLogsfrom"./Components/Logs/Logs";importLogsFormfrom"./Components/LogsForm/LogsForm";import'./App.css';constApp=......