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

问题描述

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

尝试在此处遵循本指南。此处为指南的源代码。

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

标签： reactjsdrag-and-dropreact-virtualizedreact-beautiful-dnd

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

问题描述

解决方案

推荐阅读