有没有办法使用react-dnd返回拖放目标的类名？

Question

假设我有这个组件，它代表一个拖放目标。

import { useDrop } from 'react-dnd';
import './css/DraggableGameSlot.css';

type DraggableGameSlotProps = {
    className: string,
    text: string
}

function DraggableGameSlot(props: DraggableGameSlotProps) {        
    const [{isOver}, drop] = useDrop(() => ({
        accept: "image",
        collect: (monitor) => ({
            isOver: !!monitor.isOver(),
        })
    }))
      
    return (
        <div className={`draggable-game-slot ${props.className}`} ref={drop}>
            <span>Drop here</span>
        </div>
    )
}

export default DraggableGameSlot;

当有一个项目被放到div上时，我想要得到div的className (console.log就可以了，我会自己实现我想要的逻辑)

我应该如何修改代码以获得此功能？

Answer 1

根据useDrop钩子返回的react-dnd useDrop documentation

返回值数组

收集包含从

• [0] - Collected Props：函数收集的属性的对象。如果未定义集合函数，则空对象为returned.
• [1] - DropTarget Ref：拖放目标的连接器函数。它必须附加到DOM的拖放目标部分。

因此，有了DropTarget Ref，您应该能够执行类似drop.current.classList的操作来获取拖放目标html元素的类。