反应虚拟化-列表重叠以实现不均匀的高度div

问题描述

我使用react-virtualize显示帖子列表。 问题： 帖子列表相互重叠。

我用过cellMeasurer

const roWrenderer = ({ index,style,key,parent }) => {
    const post = props.posts[index];
    return (
      <CellMeasurer
        cache={cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
      >

缓存代码

  const cache = new CellMeasurerCache({
    defaultHeight: 200,fixedWidth: true,});

Autosizer和列表代码

<AutoSizer disableHeight>
        {({ width }) => (
          <List
            height={window.innerHeight - 200}
            overscanRowCount={10}
            width={width}
            rowHeight={cache.rowHeight}
            rowCount={props.posts.length}
            roWrenderer={roWrenderer}
          />
        )}
      </AutoSizer> 

注意：每个帖子的高度都不同。每个帖子都有显示评论按钮，单击该按钮会与下一个帖子重叠。我已经附上了这个截图。

滚动后，调整其高度。最初它没有重叠。单击显示评论后，它会重叠。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）