关于剪切和重用DOM元素的效率

Question

我希望在单击事件时将一堆动态DOM元素移动到另一个父元素（模式），并在关闭模式时将它们返回到其原始父元素。 有没有比切割然后返回元素更有效的方法？

实际上，我正在做类似于移动设备上的Messenger聊天头的操作。我有一堆堆积的气泡（图像），单击时将打开一个模态，并显示分布在模态内部网格布局中的气泡。当关闭模态时，气泡将返回到堆叠形式。

一个简化示例的片段：当模式关闭时，将元素从dynamicItems移至Display组件，并将其返回至dynamicItems div：

function Example() {
const [display, setDisplay] = useState(false)

const showDisplay = () => {
    setDisplay(true)
    addItems()
}

const hideDisplay = () => {
    returnItems()
    setDisplay(false)
}

const addItems = () => {
    let newParent = document.getElementById('newContainer')
    let oldParent = document.getElementById('dynamicItems')
    while (oldParent.childNodes.length > 0) {
        newParent.appendChild(oldParent.childNodes[0])
    }
}

const returnItems = () => {
    let newParent = document.getElementById('dynamicItems')
    let oldParent = document.getElementById('newContainer')
    while (oldParent.childNodes.length > 0) {
        newParent.appendChild(oldParent.childNodes[0])
    }

}

return (
    <main>
        <h1>React Modal</h1>
        <div id='dynamicItems'>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            {items}
        </div>
        <Display display={display} handleClose={hideDisplay}>

        </Display>
        <button type="button" onClick={showDisplay}>Open</button>
    </main>
)

Answer 1

您可以将所需的内容放入组件中，并使该组件也呈现在模态上。