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

Posted 2023-02-21

【中文标题】无法让 React-Beautiful-DND 和 React-Virtualized 一起工作

【英文标题】：Cannot get React-Beautiful-DND and React-Virtualized to work together

【发布时间】：2021-05-25 12:21:06

【问题描述】：

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

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

Here is a CodeSandBox of my issue.

最后是 CodeSandBox 中重要部分的代码 sn-p：

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;
    
  

【参考方案1】：

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

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

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

你的 Autosizer 也没有增长到 height: 0 因为它的父级没有任何样式。

【讨论】：

我暂时离开了这个，因为我有一个截止日期，但@Kira 如果我能给你更多积分，我会的！演示看起来很棒，我很可能会在未来回到这个。我真的认为这应该可以帮助任何在谷歌上搜索并尝试完成同样事情的人.. 这并不容易！

@Person 此密码框丢失，请修复。

嘿，你能修复一下代码框吗？

我没有沙箱了，原来的沙箱也没有为我打开。基本上 getRowRender 有 style 参数，你需要将它传递给 div 里面的 style 属性。

style=getItemStyle(...style, snapshot.isDragging, provided.draggableProps.style ) 我想有点像这样。