如何重构简化react-beautiful-dnd拖拽代码 抽离右侧列为独立组件

核心拆分逻辑 #

按职责边界拆分组件即可，全局拖拽状态、数据操作逻辑统一保留在根容器组件，子组件仅负责接收props渲染、触发对应回调，原有的250行代码可以拆分为根容器、左侧列、右侧列三个独立函数组件，后续维护成本会大幅降低。

右侧列组件抽离实现方案 #

1. 需传递的Props&事件清单 #

注：Droppable、Draggable组件可以直接封装在右侧列子组件内部，不需要透传拖拽相关的实例对象

2. 右侧列组件代码示例 #

import { Droppable, Draggable } from 'react-beautiful-dnd';

const RightColumn = ({ columnId, title, items, onItemDelete, isDropDisabled = false }) => {
  return (
    <div className="right-column-wrapper">
      <h3 className="column-title">{title}</h3>
      <Droppable droppableId={columnId} isDropDisabled={isDropDisabled}>
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
            className={`droppable-area ${snapshot.isDraggingOver ? 'drag-highlight' : ''}`}
          >
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={String(item.id)} index={index}>
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    className={`drag-item ${snapshot.isDragging ? 'dragging-status' : ''}`}
                  >
                    <span className="item-content">{item.content}</span>
                    <button className="delete-btn" onClick={() => onItemDelete(item.id)}>删除</button>
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </div>
  )
}

export default RightColumn;

3. 根组件调用方式 #

原有的拖拽核心逻辑onDragEnd不需要修改，还是保留在根组件统一处理数组重排序、跨列数据移动，只需要在渲染部分传入对应props即可：

// 根组件内渲染逻辑示例
return (
  <DragDropContext onDragEnd={handleDragEnd}>
    <div className="dnd-container">
      {/* 左侧列也可以用完全相同的逻辑抽离为独立组件 */}
      <LeftColumn 
        columnId="left"
        title="可选选项"
        items={leftItemList}
      />
      <RightColumn
        columnId="right"
        title="已选选项"
        items={rightItemList}
        onItemDelete={handleRightItemDelete}
      />
    </div>
  </DragDropContext>
)

额外优化建议 #

• 可以把拖拽结束后重排序数组、跨列移动元素的逻辑抽为单独的工具函数，避免根组件逻辑冗余
• 如果拖拽项的渲染逻辑复杂，还可以再单独抽离DragItem通用组件，仅接收item数据和操作回调即可
• 样式可以按组件拆分到对应的独立css/module文件，避免全局样式冲突

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