Vue and React advanced features transfer

1. Teleport in Vue

It is a built-in component that can "transfer" a part of the template inside a component to the location outside the DOM structure of the component.

Consider the following HTML structure:

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

Next let's take a look at the implementation:

<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>

Insert image description here
Provides a simpler way to solve such problems, so that we no longer need to worry about the DOM structure. Let's rewrite it in terms of :

<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>

Disable Teleport
In some scenarios, it may be necessary to disable it depending on the situation. For example, we want to render a component as an overlay on desktop, but as an inline component on mobile. We can handle these two different situations by dynamically passing in a disabled prop. .

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

Multiple Teleport shared targets
A reusable modal component may have multiple instances at the same time. For such scenarios, multiple components can mount their contents on the same target element, and the order is simply appending them in sequence, and the ones mounted later will be placed further behind the target element.

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

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

2. Portal in React

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

Insert image description here