使用虚拟列表和不同大小的项目拖放

Question

我正在尝试使用 react-beautiful-dnd 和 react-virtuoso（具有自动计算项目大小的虚拟列表）来实现一个带有虚拟列表和不同大小项目的 Trello。

react-virtuoso 不属于beautiful-react-dnd 的示例，我面临两个问题：

• 拖动项目时无法滚动
• 我经常收到此错误：Invariant failed: Can only recollect Droppable client for Droppables that have a scroll container。

这是一个codesandbox

DroppableList.tsx

import * as React from "react";
import { useState } from "react";
import "./styles.css";
import { Virtuoso } from "react-virtuoso";
import {
  Draggable,
  DragDropContext,
  Droppable,
  DropResult,
  ResponderProvided
} from "react-beautiful-dnd";

import { Item } from "./Item";
import { reorder } from "./App";
import { createItemList } from "./data";
import { ItemList, ItemType } from "./dtos";

const itemCount = 30;

export const VirtualDragDropList = () => {
  const [itemList, setItemList] = useState<ItemList>(createItemList(itemCount));

  const onDragEnd = (result: DropResult, provided: ResponderProvided) => {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const items = reorder(
      itemList,
      result.source.index,
      result.destination.index
    );

    setItemList(items);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable
        droppableId="droppable"
        mode="virtual"
        renderClone={(provided, snapshot, rubric) => {
          // console.log("provided", provided);
          // console.log("snapshot", snapshot);
          // console.log("rubric", rubric);
          return (
            <Item
              itemData={itemList[(rubric as any).source.index]}
              provided={provided}
              index={(rubric as any).source.index} // typing seems wrong, hence the any.
            />
          );
        }}
      >
        {droppableProvided => (
          <div ref={droppableProvided.innerRef}>
            <Virtuoso
              style={{ width: "300px", height: "400px" }}
              totalCount={itemCount}
              // item={index => <Item itemData={itemList[index]} />}
              item={index => <Row itemData={itemList[index]} index={index} />}
            />
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

const Row = React.memo((args: { itemData: ItemType; index: number }) => {
  const { itemData, index } = args;
  return (
    <Draggable draggableId={itemData.id} index={index} key={itemData.id}>
      {(provided, snapshot) => (
        <Item itemData={itemData} index={index} provided={provided} />
      )}
    </Draggable>
  );
});

Item.tsx

import * as React from "react";

import { ItemType } from "./dtos";

export const Item: React.FC<{
  index?: number;
  itemData: ItemType | undefined;
  provided?: any;
}> = props => {
  const height = (props.itemData ? props.itemData.height : 10) * 3;
  const style = {
    margin: ".3rem",
    padding: ".3rem",
    display: "flex",
    border: "1px solid lightgrey",
    height: `${height}px`
  };

  return (
    <div
      ref={props.provided && props.provided.innerRef}
      {...props.provided && props.provided.draggableProps}
      {...props.provided && props.provided.dragHandleProps}
      style={{ ...props.provided.draggableProps.style, ...style }}
    >
      {props.itemData && props.itemData.text}
    </div>
  );
};

data.ts

import { ItemList } from "./dtos";

export const createItemList = (itemCount: number): ItemList => {
  const itemList: ItemList = [];
  for (let i = 0; i < itemCount; i++) {
    itemList.push({
      id: i.toString(),
      text: `Item ${i}`,
      height: Math.random() * 20
    });
  }

  return itemList;
}

Answer 1

从div 中删除ref={droppableProvided.innerRef} 并添加 scrollerRef={droppableProvided.innerRef} 到 virtuoso