DOM 传送术

什么是 DOM 传送？

所谓的 DOM 传送其实就是在前端开发的过程中需要将子节点渲染到父节点以外的 DOM 节点上，比如常见的 Modal 框，下拉列表等。

如何实现 DOM 传送？

现在的主流前端框架都提供有相对应的解决方案，比如 Vue3 中的Teleport、React 中的Portals。

代码实现

Vue3：Teleport

<template>
    <div>
        <button @click="showModal === true">Open Modal</button>
        // 属性to，接受一个CSS选择器，表示目标位置的元素
        <teleport to="body">
            <div v-show="showModal">
                <span>模态框</span>
                <button @click="showModal === false">Close Modal</button>
            </div>
        </teleport>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showModal: false
        }
    }
}
</script>

React：Portals

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const Demo = () => {
    const [showModal, setShowModal] = useState(false)
    
    const openModal = () => {
        setShowModal(true)
    }
    
    const closeModal = () => {
        setShowModal(false)
    }
    
    return (
        <div>
            <button onClick="openModal">Open Modal</button>
            {showModal && ReactDOM.createPortal(
                <div>
                    <span>模态框</span>
                    <button onClick="closeModal">Close Modal</button>
                </div>
            ), document.body}
        </div>
    )
}

DOM 传送需要注意什么？

1. 当前元素在传送之前需要确保目标元素已存在于 DOM 中；
2. 使用 Vue/React 渲染的传送元素在挂载之前需要先挂载目标元素。