React拖拽看板中如何获取columnID变量以正确删除列表项

尝试传递column prop未生效的核心原因是，虚拟列表的渲染逻辑和上层列组件之间的参数传递链路断裂：列组件本身持有当前列的完整数据（包含columnID），但这个值没有顺着虚拟列表的逐层渲染流程传递到最内层的Item组件，导致Item组件解构的column prop始终为undefined。

• 定位列级虚拟列表的渲染入口
  找到项目中每一列渲染<FixedSizeList>的代码段，这部分是唯一能稳定拿到当前列完整数据的位置，是传递columnID的起点。
• 打通参数传递链路
  虚拟列表默认仅给渲染回调传入索引、样式等基础参数，不会自动透传业务自定义数据。需要通过闭包逻辑，把当前列的column对象显式传入Item组件：

  {/* 列组件内的虚拟列表代码 */}
  <FixedSizeList
    height={columnHeight}
    itemCount={column.items.length}
    itemSize={itemSize}
    width="100%"
  >
    {({ index, style }) => {
      const currentItem = column.items[index]
      return (
        <Droppable
          droppableId={column.id}
          mode="virtual"
          renderClone={(provided, snapshot, rubric) => (
            <Item
              provided={provided}
              item={currentItem}
              style={style}
              isDragging={snapshot.isDragging}
              {/* 显式将column prop传入Item组件 */}
              column={column}
            />
          )}
        >
          {(provided) => (
            <div ref={provided.innerRef} {...provided.droppableProps}>
              {/* 虚拟列表渲染的静态item同样需要传入column prop */}
              {column.items.map((item) => (
                <Item
                  key={item.id}
                  provided={provided}
                  item={item}
                  style={{}}
                  isDragging={false}
                  column={column}
                />
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      )
    }}
  </FixedSizeList>
  

• 绑定删除逻辑
  当Item组件能正常接收到column prop后，即可直接拿到columnID，配合item自身的ID实现精准删除：

  function Item({ provided, item, style, isDragging, column }) {
    return (
      <div
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        ref={provided.innerRef}
        style={{ /* 原有的样式合并逻辑 */ }}
        className={`item ${isDragging ? "is-dragging" : ""}`}
      >
        {item.text}
        <button
          onClick={() => {
            // 此时已能同时拿到所属列ID、待删除条目ID，可直接调用删除方法
            console.log("列ID：", column.id, "删除条目ID：", item.id)
            deleteTargetItem(column.id, item.id)
          }}
        >
          Delete
        </button>
      </div>
    )
  }
  

如果列和Item的嵌套层级较深，逐层手动传递prop会产生大量冗余代码，可使用React Context实现跨层数据传递：

1. 全局创建列上下文

   const ColumnContext = React.createContext(null)
   

2. 在列组件的最外层包裹上下文提供者，传入当前列数据

   {/* 列组件最外层 */}
   <ColumnContext.Provider value={column}>
     <h3>{column.title}</h3>
     <FixedSizeList {/* 原有的虚拟列表配置 */}>
       {/* 内部所有子组件均可直接获取column数据，无需手动传prop */}
     </FixedSizeList>
   </ColumnContext.Provider>
   

3. 在Item组件内部直接消费上下文，无需从props接收column

   function Item({ provided, item, style, isDragging }) {
     const column = React.useContext(ColumnContext)
     // 后续逻辑和之前一致
   }
   

注意：React组件的props是自上而下单向流动的，只要中间任意一层渲染逻辑没有透传目标参数，最内层组件就无法获取对应值，不存在跨层自动取数的机制。

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