[英]Dynamic row heights with react-virtualized and new CellMeasurer
I'm using react-virualized 9 with Autosizer, List, and CellMeasurer components.我正在使用带有 Autosizer、List 和 CellMeasurer 组件的 react-virualized 9。 I need to update the row heights when the list data has changed.
当列表数据发生变化时,我需要更新行高。 It appears that since the changes to support React Fiber in version 9 the only public method for CellMeasurer is now measure().
看来,由于版本 9 中支持 React Fiber 的更改,CellMeasurer 的唯一公共方法现在是 measure()。 Most of the examples use the previous resetMeasurementForRow() method.
大多数示例使用之前的 resetMeasurementForRow() 方法。 The current CellMeasurer doc doesn't seem to have any info on the new public methods.
当前的CellMeasurer 文档似乎没有关于新公共方法的任何信息。 Not sure if I've overlooked something but any help is appreciated.
不确定我是否忽略了一些东西,但任何帮助表示赞赏。
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();
}
}
I need to update the row heights when the list data has changed.
当列表数据发生变化时,我需要更新行高。 The current CellMeasurer doc doesn't seem to have any info on the new public methods.
当前的 CellMeasurer 文档似乎没有关于新公共方法的任何信息。
Admittedly the docs could be improved, with regard to the new CellMeasurer
.诚然,关于新
CellMeasurer
的文档可以改进。 In this case though, you need to do 2 things in respond to your row data/sizes changing:但是,在这种情况下,您需要做两件事来响应行数据/大小的变化:
clear(index)
on CellMeasurerCache
.CellMeasurerCache
上调用clear(index)
来CellMeasurerCache
。 (Pass the index
of the row that's changed.) index
。)List
know that its size information needs to be recalculated.List
知道需要重新计算其大小信息。 You do this by calling recomputeRowHeights(index)
.recomputeRowHeights(index)
完成此操作。 (Pass the index
of the row that's changed.) index
。) For an example of something similar to what you're describing, check out the example Twitter-like app I built with react-virtualized.有关类似于您所描述的内容的示例,请查看我使用 react-virtualized 构建的类似 Twitter 的应用程序示例。 You can see the source here .
你可以在这里看到源代码。
if (this.props.list.length !== nextProps.list.length) {
cache.clearAll();
}
This helped me!这对我有帮助! :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.