当我滚动浏览列表时,我遇到了一些问题。 还要注意底部的巨大空间。 观看视频:https://vimeo.com/215349521
据我所知,我没有犯任何大错。 但我确实相信问题是由于CellMeasurer。
Chrome版本:58.0.3029.81
class PromotionList extends Component {
constructor(props) {
super(props);
this.cache = new CellMeasurerCache({
defaultHeight: 100,
fixedWidth: true,
});
this.rowRenderer = this.rowRenderer.bind(this);
}
componentWillMount() {
this.props.fetchPromotionsIfNeeded();
}
rowRenderer({ index, parent }) {
const { promotions } = this.props;
const data = promotions.list[index];
return (
<CellMeasurer
cache={this.cache}
columnIndex={0}
key={uuid.v1()}
parent={parent}
rowIndex={index}
>
<BlobItem
key={uuid.v1()}
type={BlobTypes.promotion}
data={data}
onClick={this.props.onItemClick}
index={index}
/>
</CellMeasurer>
);
}
render() {
const { promotions, previewSize } = this.props;
return (
<List
height={300}
width={previewSize.width}
rowCount={promotions.list.length}
deferredMeasurementCache={this.cache}
rowHeight={this.cache.rowHeight}
rowRenderer={this.rowRenderer}
className="blobList"
/>
);
}
}
答案 0 :(得分:28)
阅读完文档后找到解决方案。 只需要在&#34; rowRender&#34;中添加样式方法:
rowRenderer({ index, parent, style }) {
const { promotions } = this.props;
const data = promotions.list[index];
return (
<CellMeasurer
cache={this.cache}
columnIndex={0}
key={uuid.v1()}
parent={parent}
rowIndex={index}
>
<BlobItem
key={uuid.v1()}
type={BlobTypes.promotion}
data={data}
onClick={this.props.onItemClick}
index={index}
style={style}
/>
</CellMeasurer>
);
}