当前位置: 首页 > article >正文

【前端知识】React 基础巩固(二十六)——Portals 的使用

React 基础巩固(二十六)——Portals 的使用

Portals

  • 通常,组件会渲染到 root 节点下。可使用 Portals 将组件渲染至其他节点。

  • 添加 id 为 more、modal 的 div 元素

<div id="root"></div>
<div id="more"></div>
<div id="modal"></div>
  • 构建 Modal.jsx, 通过 createPortal 把组件渲染到指定的modal节点下
import React, { PureComponent } from "react";
import { createPortal } from "react-dom";

export class Modal extends PureComponent {
  render() {
    return createPortal(this.props.children, document.querySelector("#modal"));
  }
}

export default Modal;
  • 构建 App.jsx
import React, { PureComponent } from "react";
import { createPortal } from "react-dom";
import Modal from "./Modal";

export class App extends PureComponent {
  render() {
    return (
      <div>
        <h1>App</h1>
        {/* 直接渲染到more */}
        {createPortal(<h2>test protal</h2>, document.querySelector("#more"))}

        {/* 封装成Modal */}
        <Modal>
          <h2>test modal content</h2>
        </Modal>
      </div>
    );
  }
}

export default App;
  • 查看渲染结果

使用Portals后的渲染结果


http://www.kler.cn/a/37656.html

相关文章:

  • MySQL-Redis数据类型操作和MongoDB基本操作
  • kafka第一课-Kafka快速实战以及基本原理详解
  • 使用Gataway设置全局过滤器
  • USB接口种类知多少?一起来温故一下吧!
  • 使用Dreambooth LoRA微调SDXL 0.9
  • LabVIEW-实现波形发生器
  • scss 预处理器自定义ui框架(bem架构)
  • 奇奇怪怪的知识点-EXCEL(1)
  • 如何给合宙ESP32-C3刷写arduino固件,arduinoIDE的配置,测试代码
  • Netty 编解码技术
  • mysql查询优化
  • ipv6 问题排查
  • 【项目部署】原生部署SpringBoot项目
  • 到天宫做客
  • 节点互信or秘钥登录
  • 电动汽车路由问题的基准测试
  • Jina AI 受邀出席 WAIC 2023「科技无障碍」论坛,与行业专家共话 AI 普惠未来
  • 机器学习随机森林笔记
  • Java 中的反射是什么?如何使用它?
  • 【玩转Linux操作】Linux进程(进程基本介绍,父子进程,终止进程,进程树)