React-Beautiful-Dnd 在组件重新渲染后不起作用

Question

我正在使用 React-Beautiful-Dnd 并尝试拖放列表中的某些项目，当用户开始拖动任何项目以使其看起来更紧凑并在屏幕中显示更多项目时，这些项目将改变外观的预期行为，所以我为紧凑的外观创建了一个可重用的组件，并且我有常规的外观组件，我尝试在下面实现此代码：

<Droppable droppableId={`${groupName}`}>
      {(provided) => (
        <div ref={provided.innerRef} {...provided.droppableProps} className= 
       {styles.items}>
          {groupedCollections[groupName].map((item, index) => (
        <Draggable
          key={item.items[0]?.id}
          draggableId={item.items[0]?.id}
          index={index}
        >
          {(provided, snapshot) => {
            return (
              <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
              >
                {dragged ? (
                  <div>
                    <CollapsedItem item={item.items[0]} />
                  </div>
                ) : (
                  <div onDrag={() => setDragged(true)}>
                    <RegularLocation
                      collection={item}
                      onAddItems={() => handleAddItems(collection)}
                    />
                  </div>
                )}
              </div>
            );
          }}
        </Draggable>
      ))}
      {provided.placeholder}
    </div>
  )}
</Droppable>

下面是拖动上下文：

<DragDropContext onDragEnd={onDragEnd} onDragStart={() => setDragged(true)}>
    {returnItems()}
  </DragDropContext>

如您所见，setDragged是全局状态，一旦为真，它应该从RegularLocation切换到CollapsedItem，但问题是一旦切换组件，拖放就无法正常工作，有些项目是可删除的，有些则不能，有些可以删除有些之间的可拖动项目不是。

但是，如果我使用具有相同外观的单个组件，它会工作得很好，就像我只使用 CollapsedItem 而不切换组件或使用 RegularLocation 而不切换它会工作得很好，可能是什么原因以及我该如何做修复它吗？

Answer 1

您面临的问题似乎源于您处理拖动状态和在拖动操作过程中交换组件的方式。当您在拖动操作期间替换组件时，React 的协调过程可能会卸载并重新安装组件，这可能会扰乱 React-beautiful-dnd 的内部拖动状态和本机 HTML5 拖放行为。

这是解决该问题的推荐方法：

1. 维护稳定的 DOM 结构：当您从 RegularLocation 到 CollapsedItem，您完全替换了一个 另一个组件。始终渲染两者，而不是交换它们 组件，但使用样式来显示/隐藏或调整外观。

2. 使用 CSS 打造简洁外观： 无需更换组件， 拖动开始时使用 CSS 调整外观。这确保了 底层 DOM 结构在拖动过程中保持一致 操作。

3. 使用snapshot.isDragging：您可以使用snapshot.isDragging 由 Draggable render prop 函数提供的属性来确定 如果当前项目正在被拖动。这可以帮助申请 风格。