Блог

У меня есть несколько html-элементов, к которым я хочу добавить функции перетаскивания. Я использую useDragLayer хук для создания предварительного просмотра перетаскивания для элементов. Эти элементы получают свою ширину из гибкого контейнера, поэтому, естественно, для точного предварительного просмотра перетаскивания мне нужно указать размеры перетаскиваемого элемента. Для этого я передаю ширину и высоту элемента в источнике перетаскивания следующим образом:

 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
        })
    })
  

Здесь ссылка — это a ReactRef для элемента html. Затем я извлекаю размеры следующим DragLayer образом:

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

Теперь возникает проблема. Я перетаскиваю элемент из одного контейнера в другой. Предварительный просмотр работает так, как ожидалось. Но если я снова выберу элемент для его перемещения, предварительный просмотр перетаскивания получит значение «undefined» в качестве значения ширины и высоты. Если я остановлю перетаскивание, вернув элемент обратно в контейнер, в котором он находится в данный момент, все последующие перетаскивания этого элемента будут работать должным образом, пока я не перенесу его в другой контейнер, где снова начнется странное поведение.

Изначально я думал, что возникла проблема с ссылкой, что она не устанавливается после завершения перетаскивания и остается неопределенной. Но, похоже, это не так. После перетаскивания элемента в контейнер ref ему присваивается правильное значение.

Я думаю, что это как-то связано с React-DnD. Как вы можете видеть в useDrag хуке, я прокомментировал в collect функции возвращаемое значение надлежащего размера, где я просто извлекаю item из monitor , чтобы получить размер, так же, как я бы сделал в DragLayer . Если я раскомментирую это свойство, проблема, похоже, исчезнет. Я попытался назвать свойство по-другому (так что это не какое-то совпадение имен между тем, что находится внутри item , и тем, что внутри collect ), и это все еще работает. Я не могу понять, почему это работает, если это просто совпадение, что добавление этой строки кода решает проблему, а ошибка где-то в другом месте.

Кто-нибудь имеет представление о том, что здесь происходит? Заранее спасибо!