React DND，将项目尺寸添加到dragSource

问题描述

我有一些html元素想要添加拖放功能。我正在使用useDragLayer挂钩为元素创建拖动预览。这些元素是从flex容器获取宽度的，因此自然而然地要获得准确的拖动预览，我需要告诉它要拖动的项目的尺寸。为此，我要像这样在拖动源中传递元素的宽度和高度：

const [{isDragging,/*size*/},dragRef,previewRef] = useDrag({
        item: {
            type: LIST_ITEM_DRAG_TYPE,item,size: {
                width: ref.current?.getBoundingClientRect().width,height: ref.current?.getBoundingClientRect().height
            }
        } as DraggedListItem,collect: monitor => ({
            isDragging: monitor.isDragging(),// size: (monitor.getItem() as DraggedListItem)?.size
        })
    })

在这里，ref是html元素的ReactRef。然后，我像这样在DragLayer中检索尺寸：

const {isDragging,currentOffset,item} = useDragLayer(monitor => ({
        currentOffset: monitor.getSourceClientOffset(),initialOffset: monitor.getinitialSourceClientOffset(),item: monitor.getItem(),isDragging: monitor.isDragging()
    }) as DragLayerProps)

现在问题来了。我将一个项目从一个容器拖到另一个。预览工作正常。但是，如果我选择要再次移动的项目，则拖动预览将获得“未定义”作为宽度和高度的值。如果我停止拖动，方法是将该项目放回当前所在的容器中，则对该项目的所有后续拖动都将按预期方式工作，直到将其放到另一个容器中，然后该行为又开始奇怪了。

最初，我认为ref存在问题，拖动结束后就无法设置它，并且它仍然是未定义的。但这似乎并非如此。将元素拖到容器中后，ref被设置为正确的值。

我认为这与React-DnD有关。正如您在useDrag钩子中看到的那样，我在collect函数返回值中注释了一个属性大小，在这里我只是从item中检索monitor来获得大小，就像我在DragLayer中所做的那样。如果我取消对该财产的评论，该问题似乎将消失。我尝试将属性命名为不同的名称（因此item和collect中的名称之间没有重叠），并且仍然可以使用。我不明白为什么这行得通，如果只是巧合的话，添加那行代码就可以解决问题，而该错误在其他地方。

有人对这里发生的事情有任何想法吗？预先感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）