React-Beautiful-Dnd切换组件后拖拽功能异常求助

问题原因 #

React-Beautiful-Dnd（简称RBD）的拖拽逻辑严重依赖组件实例与DOM结构的稳定性：

• 当dragged状态切换时，所有Draggable项的子组件会从RegularLocation完全替换为CollapsedItem，触发React对整个列表的重新挂载，而非仅更新样式。
• RBD内部会跟踪每个Draggable的DOM节点引用、拖拽状态，组件完全替换会导致这些跟踪信息丢失，进而出现拖拽/放置失效的问题。
• RegularLocation外层绑定的onDrag事件，和DragDropContext的onDragStart重复触发状态更新，加重了渲染混乱。

解决方法 #

核心思路是保持Draggable包裹的根组件结构稳定，仅切换内部样式或内容，不替换整个组件：

1. 合并样式切换逻辑到单个组件 #

创建统一的容器组件，根据状态切换内部渲染内容，避免完全替换组件：

// 统一的列表项组件
const LocationItem = ({ item, collection, onAddItems, isDragging }) => {
  if (isDragging) {
    return <CollapsedItem item={item} />;
  }
  return <RegularLocation collection={collection} onAddItems={onAddItems} />;
};

2. 优化Draggable与状态逻辑 #

• 移除RegularLocation外层的冗余onDrag事件，仅通过DragDropContext的onDragStart控制状态。
• 在onDragEnd中重置dragged为false，拖拽结束后恢复正常样式。
• 保持Draggable的子组件结构稳定，始终渲染同一个容器组件。

修改后的核心代码：

// DragDropContext部分
<DragDropContext 
  onDragEnd={(result) => {
    onDragEnd(result); // 保留原有拖拽结束逻辑
    setDragged(false); // 重置状态
  }} 
  onDragStart={() => setDragged(true)}
>
  {returnItems()}
</DragDropContext>

// Droppable部分
<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}
              >
                {/* 始终渲染同一个组件，仅内部切换内容 */}
                <LocationItem
                  item={item.items[0]}
                  collection={item}
                  onAddItems={() => handleAddItems(item)}
                  isDragging={dragged}
                />
              </div>
            );
          }}
        </Draggable>
      ))}
      {provided.placeholder}
    </div>
  )}
</Droppable>

3. 可选：精准控制单个拖拽项样式 #

如果需求是仅让正在拖拽的项变为紧凑样式，其他项保持原样，可以直接使用Draggable提供的snapshot.isDragging状态，避免全局状态导致的全列表重渲染：

// 修改LocationItem的判断条件
const LocationItem = ({ item, collection, onAddItems, isDragging }) => {
  if (isDragging) {
    return <CollapsedItem item={item} />;
  }
  return <RegularLocation collection={collection} onAddItems={onAddItems} />;
};

// Draggable内部使用snapshot.isDragging
<Draggable ...>
  {(provided, snapshot) => {
    return (
      <div ...>
        <LocationItem
          ...
          isDragging={snapshot.isDragging}
        />
      </div>
    );
  }}
</Draggable>

内容的提问来源于stack exchange，提问作者Kiraahmad