Css 使用React虚拟化时增加元素之间的间距
我正在使用React虚拟化创建一个延迟加载无限列表 但是,我无法在渲染的div之间创建间隙,因为它们是绝对定位的,并且top是动态计算的 我尝试了以下方法,但没有成功。 有没有关于如何在每个元素之间增加这个差距的想法?谢谢Css 使用React虚拟化时增加元素之间的间距,css,reactjs,list,react-virtualized,Css,Reactjs,List,React Virtualized,我正在使用React虚拟化创建一个延迟加载无限列表 但是,我无法在渲染的div之间创建间隙,因为它们是绝对定位的,并且top是动态计算的 我尝试了以下方法,但没有成功。 有没有关于如何在每个元素之间增加这个差距的想法?谢谢 <AutoSizer disableHeight> {({width}) => ( <List onRowsRendered={onRowsRendered}
<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>
{({width})=>(
)}
我最终解决了填充问题,在CellMeasurer中添加了一个div作为父容器来提供填充
div是绝对定位的容器,而卡片是填充的,并显示方框阴影
<CellMeasurer
cache={this.cache}
columnIndex={0}
key={key}
rowIndex={index}
parent={parent}
>
{({ measure }) => (
<div
className={s.listItem}
style={style}
onLoad={measure}
key={index}>
<Card>
{({measure})=>(