时间戳

首页 > 解决方案 > 有没有办法使用 react-dnd 返回放置目标的类名？

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

问题描述

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

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就可以了，我自己实现我想要的逻辑）

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

标签： javascriptreactjstypescriptreact-dnd

解决方案

根据react-dnd useDrop 文档，useDrop钩子返回

返回值数组

  • [0] - Collected Props: 一个包含从 collect 函数收集的属性的对象。如果未定义 collectfunction，则返回一个空对象。
  • [1] - DropTarget Ref: 放置目标的连接器函数。这必须附加到 DOM 的放置目标部分。

所以，拥有DropTarget Ref你应该能够做一些事情，比如drop.current.classList获取放置目标 html 元素的类。

推荐阅读