时间戳

首页 > 解决方案 > 拖动后如何更改react-dnd中的drop组件？

reactjs - 拖动后如何更改react-dnd中的drop组件？

问题描述

我不知道以前是否有人问过这个问题，但我想做以下事情：我正在拖动图像并将其放入容器中，但我想要（比方说）一个 h1 元素而不是丢弃图像被丢弃在容器中。

编辑： 这是拖动对象的代码（我正在拖动的那个）：

const [{ isDragging }, drag] = useDrag({
    type: ItemTypes.SECTION,
        collect: monitor => ({
            isDragging: !!monitor.isDragging()
        })
})

<img src={accreAss1} alt="Accre Asset 1" ref={drag} style={isDragging ? { "cursor": "copy" } : { "cursor": "pointer" }}/>

这是我要放置拖动对象的代码：

let children = [];
const [{ canDrop }, drop] = useDrop({
    accept: ItemTypes.SECTION,
    drop: () => {
        children.push(<h1>Heading to be added</h1>/>)
        console.log(children)
    },
    collect: monitor =>  ({
        canDrop: !!monitor.canDrop()
    })
})

/* ---- some code ----*/
return (

    <section className="container">
        {children}
    </section>
)

我在控制台中看到了标题，但它没有显示在className="container"

标签： reactjsreact-dnd

解决方案

推荐阅读