React DnD - 如何获取拖动项目的ID

Question

如何在我的文件中控制台登录我的放置区域，我正在移动的节点的 ID（可拖动项目）。我相信我应该使用monitor.getItem()，正如documentation中指定的那样，但我不明白，

我的可拖动节点上有ref={drag}，可放置节点上有ref={drop}。

可拖动项目：

  const [{ isDragging }, drag] = useDrag({
    item: { type: 'TODO_ITEM' },
    collect: monitor => ({
      isDragging: !!monitor.isDragging()
    }),
    drag: () => {
      console.log('dragging')
    }
  })

放置区域

  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'TODO_ITEM',
    collect: mon => ({
      isOver: !!mon.isOver(),
      canDrop: !!mon.canDrop()
    }),
    drop: monitor => {
      console.log(monitor)
      // monitor only returns { type: 'TODO_ITEM' }
    }
  })

Answer 1

我通过可拖动项目上的道具拉入项目，将其连接到监视器，然后在可放置区域上拾取它来解决它。

可拖动项目

export default function TodoItem ({ item }) {

  const [{ isDragging }, drag] = useDrag({
    item: { type: 'TODO_ITEM', itemID: item._id },
    collect: monitor => ({
      item: monitor.getItem(),
      isDragging: !!monitor.isDragging()
    })
  })

...

放置区域：

  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'TODO_ITEM',
    collect: mon => ({
      isOver: !!mon.isOver(),
      canDrop: !!mon.canDrop()
    }),
    drop: monitor => {
      console.log('moving item:', monitor.itemID)
    }
  })