[英]Dynamic row heights with react-virtualized and new CellMeasurer
我正在使用带有 Autosizer、List 和 CellMeasurer 组件的 react-virualized 9。 当列表数据发生变化时,我需要更新行高。 看来,由于版本 9 中支持 React Fiber 的更改,CellMeasurer 的唯一公共方法现在是 measure()。 大多数示例使用之前的 resetMeasurementForRow() 方法。 当前的CellMeasurer 文档似乎没有关于新公共方法的任何信息。 不确定我是否忽略了一些东西,但任何帮助表示赞赏。
const cache = new CellMeasurerCache({
defaultHeight: 60,
fixedWidth: true
});
<AutoSizer>
{({ width, height }) => (
<List
deferredMeasurementCache={cache}
height={height}
ref={element => { this.list = element; }}
rowCount={list.length}
rowHeight={cache.rowHeight}
rowRenderer={this.rowRenderer}
width={width}
/>
)}
</AutoSizer>
rowRenderer({ index, key, parent, style }) {
return (
<CellMeasurer
cache={cache}
columnIndex={0}
key={key}
overscanRowCount={10}
parent={parent}
ref={element => { this.cellMeasurer = element; }}
rowIndex={index}
>
{({ measure }) => {
this.measure = measure.bind(this);
return <MyList index={index} data={list[index]} style={style} />;
}}
</CellMeasurer>
);
}
componentWillReceiveProps(nextProps) {
// Some change in data occurred, I'll probably use Immutable.js here
if (this.props.list.length !== nextProps.list.length) {
this.measure();
this.list.recomputeRowHeights();
}
}
当列表数据发生变化时,我需要更新行高。 当前的 CellMeasurer 文档似乎没有关于新公共方法的任何信息。
诚然,关于新CellMeasurer
的文档可以改进。 但是,在这种情况下,您需要做两件事来响应行数据/大小的变化:
CellMeasurerCache
上调用clear(index)
来CellMeasurerCache
。 (传递更改的行的index
。)List
知道需要重新计算其大小信息。 您可以通过调用recomputeRowHeights(index)
完成此操作。 (传递更改的行的index
。)有关类似于您所描述的内容的示例,请查看我使用 react-virtualized 构建的类似 Twitter 的应用程序示例。 你可以在这里看到源代码。
if (this.props.list.length !== nextProps.list.length) {
cache.clearAll();
}
这对我有帮助! :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.