无法让 React-Beautiful-DND 和 React-Virtualized 一起工作

Question

伙计们，实际上几天来我一直在努力让它发挥作用，但我还没弄明白。我可以让两个库单独工作，但我仍然坚持为什么当我将两者结合时它不起作用。我想我以某种方式将它们连接错误，我只是无法弄清楚它是什么。请帮忙。

尝试遵循本指南here. Source code for guide here。

最后是 CodeSandBox 中重要部分的代码片段：

getRowRender({ index, style }) {
    const item = this.state.items[index];

    return (
      <Draggable draggableId={item.id} index={index} key={item.id}>
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            style={getItemStyle(
              snapshot.isDragging,
              provided.draggableProps.style
            )}
          >
            {item.content}
          </div>
        )}
      </Draggable>
    );
  }


 render() {
    if (this.state.items) {      
      return (
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable
            droppableId="droppable"
            mode="virtual"
            renderClone={(provided, snapshot, rubric) => (
              <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
                style={getItemStyle(
                  snapshot.isDragging,
                  provided.draggableProps.style
                )}
              >
                {this.state.items[rubric.source.index].content}
              </div>
            )}
          >
            {(provided, snapshot) => (
              <AutoSizer>
                {({ height, width }) => (
                  <List
                    {...provided.droppableProps}
                    height={height}
                    rowCount={this.state.items.length}
                    rowHeight={500}
                    width={width}
                    ref={(ref) => {
                      // react-virtualized has no way to get the list's ref that I can so
                      // So we use the `ReactDOM.findDOMNode(ref)` escape hatch to get the ref
                      if (ref) {
                        // eslint-disable-next-line react/no-find-dom-node
                        const whatHasMyLifeComeTo = ReactDOM.findDOMNode(ref);
                        if (whatHasMyLifeComeTo instanceof HTMLElement) {
                          provided.innerRef(whatHasMyLifeComeTo);
                        }
                      }
                    }}
                    style={getListStyle(snapshot.isDraggingOver)}
                    rowRenderer={this.getRowRender}
                  />
                )}
              </AutoSizer>
            )}
          </Droppable>
        </DragDropContext>
      );
    } else {
      return null;
    }
  }

Answer 1

我想我设法解决了这个问题。

https://codesandbox.io/s/vertical-list-forked-risye

您没有在 rowRenderer 中传递样式属性来虚拟化以正确的方式处理您的行。

此外，您的 Autosizer 没有增长超过高度：0，因为它的父级没有任何样式。

Answer 2

如果有人仍在寻找具有工作原型的活动沙箱。这是 post 我已经回答并添加了沙箱 link

无法让 React-Beautiful-DND 和 React-Virtualized 一起工作

Cannot get React-Beautiful-DND and React-Virtualized to work together

drag-and-drop

reactjs

react-virtualized

react-beautiful-dnd