React-dnd拖拽后如何替换放置组件及解决渲染不生效问题

• React 仅在组件state（状态）或props（属性）更新时触发重渲染，你当前声明的children是组件内的普通变量，修改这类变量React无法感知，因此界面不会同步更新。
• 代码存在语法错误：children.push(<h1>Heading to be added</h1>/)中多写了冗余的斜杠。
• 若你原代码中放置容器未绑定drop ref，useDrop逻辑也不会生效。

import { useState } from 'react'
import { useDrop } from 'react-dnd'

// 使用useState管理渲染列表
const [children, setChildren] = useState([]);
const [{ canDrop }, drop] = useDrop({
    accept: ItemTypes.SECTION,
    drop: () => {
        // 通过setState更新状态触发重渲染
        setChildren(prev => [...prev, <h1>Heading to be added</h1>])
    },
    collect: monitor =>  ({
        canDrop: !!monitor.canDrop()
    })
})

return (
    // 绑定drop ref到容器
    <section className="container" ref={drop}>
        {children}
    </section>
)

内容的提问来源于stack exchange，提问作者Ahsan Shahid