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

问题描述

伙计们，我实际上已经尝试让它工作了几天，但我一直无法弄清楚。我可以让两个库单独工作，但我一直在思考为什么当我将两者结合起来时它不起作用。我想我以某种方式将它们连接错了，我只是无法弄清楚它是什么。请帮忙。

尝试遵循本指南 here。指南 here 的源代码。

Here is a CodeSandBox of my issue。

最后这里是 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;
    }
  }

解决方法

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

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

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

此外，您的 Autosizer 并没有超过 height: 0，因为它的父级没有任何样式。