Vue和React高级特性之传送_react teleport-程序员宅基地

技术标签： react.js  前端  vue.js  React  

一、Vue中的Teleport

是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去

试想下面这样的 HTML 结构：

<div class="outer">
  <h3>Tooltips with Vue 3 Teleport</h3>
  <div>
    <MyModal />
  </div>
</div>

接下来我们来看看 的实现：

<script setup>
import {
     ref } from 'vue'

const open = ref(false)
</script>

<template>
  <button @click="open = true">Open Modal</button>

  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</template>

<style scoped>
.modal {
    
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}
</style>

在这里插入图片描述
提供了一个更简单的方式来解决此类问题，让我们不需要再顾虑 DOM 结构的问题。让我们用 改写一下 ：

<button @click="open = true">Open Modal</button>

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

禁用 Teleport
在某些场景下可能需要视情况禁用 。举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对 动态地传入一个 disabled prop 来处理这两种不同情况。.

<Teleport :disabled="isMobile">
  ...
</Teleport>

多个 Teleport 共享目标
一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

渲染的结果为：
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

二、React中的Portal

index.js

import React from 'react'

import RenderPropDemo from './RenderPropDemo'

class AdvancedUse extends React.Component {
    
    constructor(props) {
    
        super(props)
    }
    render() {
    
        return <div>
            <PortalsDemo>Modal 内容</PortalsDemo>
        </div>
    }
}

export default AdvancedUse

PortalsDemo.js

import React from 'react'
import ReactDOM from 'react-dom'
import './style.css'

class App extends React.Component {
    
    constructor(props) {
    
        super(props)
        this.state = {
    
        }
    }
    render() {
    
        // // 正常渲染
        // return <div className="modal">
        //     {this.props.children} {/* vue slot */}
        // </div>

        // 使用 Portals 渲染到 body 上。
        // fixed 元素要放在 body 上，有更好的浏览器兼容性。
        return ReactDOM.createPortal(
            <div className="modal">
              {
    this.props.children}  {
    /* 类似vue slot */}
            </div>,
            document.body // DOM 节点 第二参数，表示要渲染到什么地方去
        )
    }
}

export default App

在这里插入图片描述
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44582045/article/details/133805391

智能推荐

内核调试番外篇 - KDB的介绍与简单使用_kdb是什么-程序员宅基地

文章浏览阅读8.1k次，点赞2次，收藏15次。From: 内核&调试调试内核调试番外篇 - KDB的介绍与简单使用1、什么是 KDB？kdb是一个Linux系统的内核调试器，它是由SGI公司开发的遵循GPL许可证的开放源码调试工具。kdb嵌入在Linux内核中，为内核&&驱动程序员提供调试手段。它适合于调试内核空间的程序代码，譬如进行设备驱动程序调试，内核模块的调试等。2、为什么要用KDB？Bug处处有，不同人的编码思维，以及架构思维！总是会_kdb是什么

redis的发布订阅_jedis的发布订阅-程序员宅基地

文章浏览阅读168次。Redis提供了发布订阅功能，可以用于消息的传输，Redis的发布订阅机制包括三个部分：发布者、订阅者和Channel。订阅消息 发布消息 这里返回的2表示接收到该消息的订阅者的数量为2： 再次发布消息： 这里返回的1表示接收到该消息的订阅者的数量为1： ..._jedis的发布订阅

逆天：蘑菇街下单平台演进，从PHP到Java-程序员宅基地

文章浏览阅读174次。本次分享的主题为：蘑菇街下单平台演进。主要介绍的内容是蘑菇街如何一步一步从PHP往Java服务化平台转化的过程。这次介绍的主要内容包括5个点：1、首先，我们需要看一下就是去年9月我刚到蘑菇街时，我所看到的下单系统。当时这个系统所面临的一个问题是什么？面对这些问题我们应该做如何的应对方案。2、其次，我们为什么要做系统拆分，整个服务化过程是怎么做的。...

lopa分析_LOPA实战案例 - 基于RiskCloud风险分析软件的AQ/T 3054的实施-程序员宅基地

文章浏览阅读1k次。关于歌略RiskCloudRiskCloud是一款由上海歌略软件科技有限公司（下称"歌略"）独立自主研发的风险分析软件（国家专利：CN201710121334一种自定义风险分析方法）。01 标准简介AQ/T 3054主要对LOPA基本程序进行了明确的规范和详细的描述，重点规定了LOPA场景与筛选、初始事件确认、独立保护层、场景频率计算、风险评估与决策等方面的技术要求。一个典型的化工过程包含各种保护..._歌略

【OCC学习20】使用TKSTL输出stl格式文件_occ格式输出-程序员宅基地

文章浏览阅读780次。STL文件格式，是3D System公司于1988年制定的一个结构协议，是一种快速原型制造服务的三维图形文件格式。STL文件由许多三角形面片组成，每个三角形面片由三个顶点的三维坐标和三角形面片的法线向量描述。STL文件仅描述三维物体的表面几何形状，没有颜色、材质贴图等其他属性。_occ格式输出

nVIDIA Jetson TX1 u-boot编译与烧写_error: bad value (‘armv8-a+crc’) for ‘-march=’ swi-程序员宅基地

文章浏览阅读4.7k次。1、官网下载源码：https://developer.nvidia.com/embedded/downloads#?tx=$software,l4t-tx1 解压u-boot_src.tbz2到本地：$ tar -xvjf u-boot_src.tbz2$ cd u-boot/ 2、u-boot修改与编译设置环境变量：$ export ARCH=arm$ export CROSS_COMPILE=_error: bad value (‘armv8-a+crc’) for ‘-march=’ switch

随便推点

前端常用调试方式_前端调试-程序员宅基地

文章浏览阅读1.3k次，点赞11次，收藏12次。1947年，哈佛大学，一只飞蛾粘在一个继电器上，导致计算机无法正常工作，操作员把飞蛾移除之后，计算机又恢复了正常运转。除使用Flipper调试RN应用之外，使用RN自带的chrome devTools 也可以，只不过无法抓包network请求，可以借助charles等工具。将Chrome的网络请求转到各种服务上的插件，比如Charles的启动的服务默认端口8888，就需要。内网发现的神器，为啥给他单独列一类拿来讲，因为看着类似Weinre，真机调试工具，真机调试在某些场景还是很重要。给电脑装ssl证书。_前端调试

pointer-events-程序员宅基地

文章浏览阅读282次。此时该元素将不响应指针事件，但它下面的元素可以响应指针事件，就像元素不存在于它们之上一样。② visibility属性值：visible，鼠标指针在元素边界上，且stroke属性值非none。① visibility属性值：visible，且鼠标指针在元素内部，且fill属性值非none。此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。① visibility属性值：visible，且鼠标指针在元素内部或边界。① visibility属性值：visible，且鼠标指针在元素边界。_pointer-events

Linux 实训4 正则表达式_查找任意字符开头,然后第二个字符为3-程序员宅基地

文章浏览阅读2.7k次，点赞9次，收藏32次。将实训4：正则表达式的完成情况提交实验报告。创建并输入文本文件保存退出：Esc+： wq设置语系为C，代码：#export LANG=C①查看以字符“a”开头的行。②查看以字符串“abc"开头的行。①查看以字符串“33”结尾的行。②查看以字符“3”结尾的行。（3） []:匹配[]内的字符或者关系。①查看包含字符“1” 或者包含字符“2”包含字符“3”的行。②查看包含字符test或taste的行。_查找任意字符开头,然后第二个字符为3

人工智能自然语言处理：理论、实践与未来_自然语言处理的背景和意义-程序员宅基地

文章浏览阅读350次。如何在推动技术发展的同时，保障人类的利益和权益，是AI-NLP研究者必须面对和思考的问题。首先，对于复杂语境和语言结构的理解仍然是AI-NLP的挑战。另外，如何提高模型的鲁棒性和可解释性，以及如何解决数据偏差和伦理问题，都是AI-NLP未来需要解决的重要问题。另一方面，随着应用的普及，AI-NLP如何更好地融入人类社会，如何解决与之相关的伦理和社会问题，也成为一个亟待研究和解决的重要问题。例如，通过分析病人的病历和医学文献，AI-NLP可以帮助医生快速找到疾病的可能原因，提高诊断的准确性。_自然语言处理的背景和意义

nginx+ffmpeg搭建rtmp转播rtsp流的flash服务器-程序员宅基地

文章浏览阅读4次。本文概要： nginx是非常优秀的开源服务器，用它来做hls或者rtmp流媒体服务器是非常不错的选择。本文介绍了一种简易方法快速搭建rtmp流媒体服务器，也叫rtsp转播，数据源不是读取文件，而是采用获取rtspNal流后使用ffmpeg转播。csdn固本培元：[email protected]开发环境：centos6.4 (主流的linux服务器选择，30%以上的市场占有率...

ITSM是什么，为企业带来什么价值？-程序员宅基地

文章浏览阅读361次。IT服务管理（ITSM）是一种将IT服务与企业业务战略相结合的方法，旨在确保企业的IT服务能够满足业务需求，提高服务质量，降低成本并降低风险。ITSM的实施涉及到对企业的IT服务进行规划、设计、实施、监控和改进等一系列过程。_itsm

推荐文章

热门文章

相关标签