当我滚动浏览列表时,我遇到了一些问题.
还要注意底部的巨大空间.
见视频： https://vimeo.com/215349521
还要注意底部的巨大空间.
见视频： 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"
/>
);
}
}
阅读完文档后找到解决方案.
只需要在“rowRender”方法中添加样式：
只需要在“rowRender”方法中添加样式：
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>
);
}
