React第二十六章(createPortal)

createPortal

注意这是一个API,不是组件,他的作用是:将一个组件渲染到DOM的任意位置,跟Vue的Teleport组件类似。

用法

import { createPortal } from 'react-dom';

const App = () => {
  return createPortal(<div>小满zs</div>, document.body);
};

export default App;

参数

入参

  • children:要渲染的组件
  • domNode:要渲染到的DOM位置
  • key?:可选,用于唯一标识要渲染的组件

返回值

  • 返回一个React元素(即jsx),这个元素可以被React渲染到DOM的任意位置

应用场景

  • 弹窗
  • 下拉框
  • 全局提示
  • 全局遮罩
  • 全局Loading

例如 Antd 的 Modal 组件,就是挂载到 body 上的。

在这里插入图片描述

案例

封装弹框组件

  • src/components/Modal/index.tsx
import './index.css';
export const Modal = () => {
  return <div className="modal">
    <div className="modal-header">
      <div className="modal-title">标题</div>
    </div>
    <div className="modal-content">
      <h1>Modal</h1>
    </div>
    <div className="modal-footer">
      <button className="modal-close-button">关闭</button>
      <button className="modal-confirm-button">确定</button>
    </div>
  </div>
}
  • src/components/Modal/index.css
.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #4d4d4d;
    width: 500px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
}
.modal-content {
   padding:20px 0;
   flex: 1;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
}
.modal-close-button {
    margin-right: 10px;
    background-color: #000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
.modal-confirm-button {
    margin-left: 10px;
    background-color:rgb(46, 46, 164);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

基本的html + css 比较简单就不多说了,先看一下效果

在这里插入图片描述

如果外层有position: relative 的样式,那么弹框会相对于外层进行定位,如果外层没有position: relative 的样式,那么弹框会相对于body进行定位,故此这个Modal不稳定,所以需要使用createPortal来将Modal挂载到body上,或者直接将定位改成position: fixed,两种方案。

  • 方案一:使用createPortal
import './index.css';
import { createPortal } from 'react-dom';
export const Modal = () => {
  return createPortal(<div className="modal">
    <div className="modal-header">
      <div className="modal-title">标题</div>
    </div>
    <div className="modal-content">
      <h1>Modal</h1>
    </div>
    <div className="modal-footer">
      <button className="modal-close-button">关闭</button>
        <button className="modal-confirm-button">确定</button>
      </div>
    </div>,
    document.body
  )
}
  • 方案二:使用position: fixed
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #4d4d4d;
    width: 500px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

这样的话,Modal 组件就稳定了,无论外层是否有 position: relative 的样式,Modal 组件都会相对于 body 进行定位。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/961113.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

文献阅读 250128-Tropical forests are approaching critical temperature thresholds

Tropical forests are approaching critical temperature thresholds 来自 <Tropical forests are approaching critical temperature thresholds | Nature> 热带森林正在接近临界温度阈值 ## Abstract: The critical temperature beyond which photosynthetic machinery…

RubyFPV开源代码之系统简介

RubyFPV开源代码之系统简介 1. 源由2. 工程架构3. 特性介绍&#xff08;软件&#xff09;3.1 特性亮点3.2 数字优势3.3 使用功能 4. DEMO推荐&#xff08;硬件&#xff09;4.1 天空端4.2 地面端4.3 按键硬件Raspberry PiRadxa 3W/E/C 5. 软件设计6. 参考资料 1. 源由 RubyFPV以…

单片机-STM32 WIFI模块--ESP8266 (十二)

1.WIFI模块--ESP8266 名字由来&#xff1a; Wi-Fi这个术语被人们普遍误以为是指无线保真&#xff08;Wireless Fidelity&#xff09;&#xff0c;并且即便是Wi-Fi联盟本身也经常在新闻稿和文件中使用“Wireless Fidelity”这个词&#xff0c;Wi-Fi还出现在ITAA的一个论文中。…

H2 Database安装部署

H2 Database H2 Database官网 H2 中文文档 安装部署H2 java版本要高于java 11 ## 下载java21 wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.tar.gz[rootlocalhost ~]# tar xf jdk-21_linux-x64_bin.tar.gz -C /usr/local/ [rootlocalhost ~]# vi…

网易云音乐歌名可视化:词云生成与GitHub-Pages部署实践

引言 本文将基于前一篇爬取的网易云音乐数据, 利用Python的wordcloud、matplotlib等库, 对歌名数据进行深入的词云可视化分析. 我们将探索不同random_state对词云布局的影响, 并详细介绍如何将生成的词云图部署到GitHub Pages, 实现数据可视化的在线展示. 介绍了如何从原始数据…

【Unity3D】实现2D小地图效果

目录 一、玩家脚本Player 二、Canvas组件设置 三、小地图相关 四、GameLogicMap脚本修改 基于&#xff1a;【Unity3D】Tilemap俯视角像素游戏案例-CSDN博客 2D玩家添加Dotween移动DOPath效果&#xff0c;移动完成后进行刷新小地图&#xff08;小地图会顺便刷新大地图&…

Langchain+文心一言调用

import osfrom langchain_community.llms import QianfanLLMEndpointos.environ["QIANFAN_AK"] "" os.environ["QIANFAN_SK"] ""llm_wenxin QianfanLLMEndpoint()res llm_wenxin.invoke("中国国庆日是哪一天?") print(…

【stm32学习】STM32F103相关特性

| 名称 | 缩写 | 频率 | 外部连接 | 功能 | 用途 | 特性 | |--------------------|------|----------------|---------------|------------|--------------|----------------| | 外部高速晶体振荡器 | HSE | 4~16MHz …

ModernBERT 为我们带来了哪些启示?

当谷歌在 2018 年推出 BERT 模型时&#xff0c;恐怕没有料到这个 3.4 亿参数的模型会成为自然语言处理领域的奠基之作。 六年后的今天&#xff0c;面对动辄千亿参数的大语言模型浪潮&#xff0c;Answer.AI、LightOn与 HuggingFace 联手打造的 ModernBERT 却选择了一条返璞归真的…

IO进程寒假作业DAY6

请使用互斥锁 和 信号量分别实现5个线程之间的同步 使用互斥锁 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include &…

揭示Baklib企业内容管理系统CMS的核心功能与应用价值

内容概要 企业内容管理系统&#xff08;CMS&#xff09;是指通过一系列工具和技术&#xff0c;帮助企业高效地创建、存储、管理和分发数字内容的系统。这些系统在现代企业运作中发挥着至关重要的作用&#xff0c;尤其是在信息量大、业务流程复杂的环境中。Baklib作为一个突出的…

冯诺依曼系统及操作系统

目录 一.冯诺依曼体系结构 二.操作系统 三.系统调用和库函数概念 一.冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c;大部分都遵守冯诺依曼体系 截至目前&#xff0c;我们所认识的计算机&#xff0c;都是由一…

Vue5---

目录 一、学习目标 1.自定义指令 2.插槽 3.综合案例&#xff1a;商品列表 4.路由入门 二、自定义指令 1.指令介绍 2.自定义指令 3.自定义指令的语法 三、自定义指令-指令的值 1.需求 2.语法 3.代码示例 五、插槽-默认插槽 1.作用 2.需求 4.使用插槽的基本语法…

搭建Spring Boot开发环境

JDK&#xff08;1.8及以上版本&#xff09; Apache Maven 3.6.0 修改settings.xml 设置本地仓库位置 <localRepository>D:/repository</localRepository> 设置远程仓库镜像 <mirror><id>alimaven</id><name>aliyun maven</name&…

Visio2021下载与安装教程

这里写目录标题 软件下载软件介绍安装步骤 软件下载 软件名称&#xff1a;Visio2021软件语言&#xff1a;简体中文软件大小&#xff1a;4.28G系统要求&#xff1a;Windows10或更高&#xff0c;64位操作系统硬件要求&#xff1a;CPU2GHz &#xff0c;RAM4G或更高下载链接&#…

AI 浪潮席卷中国年,开启科技新春新纪元

在这博主提前祝大家蛇年快乐呀&#xff01;&#xff01;&#xff01; 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;其影响力已经渗透到社会生活的方方面面。在中国传统节日 —— 春节期间&#xff0c;AI 技术也展现出了巨大的潜力&#xff0c;为中国年带…

【C++高并发服务器WebServer】-1:Linux中父子进程fork创建及关系、GDB多进程调试

本文目录 一、进程创建二、GDB多进程调试 一、进程创建 在Linux中输入man 2 fork可以查看man文档中的fork的相关函数信息。 fork的作用就是创建一个子进程。 通过fork我们可以知道&#xff0c;创建子进程的时候&#xff0c;复制父进程的信息。 我们看看翻译的man文档信息&am…

中科大:LLM检索偏好优化应对RAG知识冲突

&#x1f4d6;标题&#xff1a;RPO: Retrieval Preference Optimization for Robust Retrieval-Augmented Generation &#x1f310;来源&#xff1a;arXiv, 2501.13726 &#x1f31f;摘要 &#x1f538;虽然检索增强生成&#xff08;RAG&#xff09;在利用外部知识方面表现出…

Antd React Form使用Radio嵌套多个Select和Input的处理

使用Antd React Form使用Radio会遇到嵌套多个Select和Input的处理&#xff0c;需要多层嵌套和处理默认事件和冒泡&#xff0c;具体实现过程直接上代码。 实现效果布局如下图 代码 <Formname"basic"form{form}labelWrap{...formItemLayoutSpan(5, 19)}onFinish{on…

【deepseek】deepseek-r1本地部署-第一步:下载LM Studio

要下载LM Studio&#xff0c;可以按照以下步骤进行&#xff1a; 一、访问LM Studio官方网站 打开必应&#xff08;注意&#xff01;百度无法打开官网&#xff09;&#xff0c;输入LM Studio的官方网址&#xff1a;LM Studio - Discover, download, and run local LLMs。进入L…