使用 React Virtualized 在元素之间添加间隙

Question

我正在使用 React-Virtualized 创建延迟加载无限列表。

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md

但是，我无法在呈现的 div 之间创建间隙，因为它们是绝对定位的并且顶部是动态计算的。

我尝试了以下方法，但没有成功。关于如何在每个元素之间添加此间隙的任何想法？谢谢！

<AutoSizer disableHeight>
   {({width}) => (
              <List
                onRowsRendered={onRowsRendered}
                ref={registerChild}
                rowCount={rowCount}
                rowRenderer={rowRenderer}
                width={width - 30}
                rowHeight={175}
                height={this.state.height - 64}
                style={{
                  paddingTop: 15,
                  boxSizing: 'content-box',
                }}
                containerStyle={{
                  position: 'relative',
                  overflow: 'visible',
                }}
              />
    )}
</AutoSizer>

Answer 1

我最终通过在 CellMeasurer 中添加一个 div 作为父容器来提供填充来解决填充问题。

div是绝对定位的容器，而Card是填充的，显示框阴影。

<CellMeasurer
      cache={this.cache}
      columnIndex={0}
      key={key}
      rowIndex={index}
      parent={parent}
    >
      {({ measure }) => (
        <div
          className={s.listItem}
          style={style}
          onLoad={measure}
          key={index}>
            <Card>

使用 React Virtualized 在元素之间添加间隙

Add Gap Between Elements While Using React Virtualized

css

reactjs

list

react-virtualized