我正在使用react-virualized 9与Autosizer,List和CellMeasurer组件。我需要在列表数据发生变化时更新行高。看来,自从版本9中支持React Fiber的更改以来,CellMeasurer的唯一公共方法现在是measure()。大多数示例使用以前的resetMeasurementForRow()方法。当前CellMeasurer doc似乎没有关于新公共方法的任何信息。不确定我是否忽略了某些东西,但感谢任何帮助。
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();
}
}
答案 0 :(得分:22)
我需要在列表数据发生变化时更新行高。 目前的CellMeasurer doc似乎没有关于新公共方法的任何信息。
不可否认,就新CellMeasurer
而言,文件可以得到改进。但在这种情况下,您需要做两件事来响应您的行数据/尺寸更改:
clear(index)
上致电CellMeasurerCache
来执行此操作。 (通过已更改行的index
。)List
知道需要重新计算其大小信息。您可以致电recomputeRowHeights(index)
来完成此操作。 (通过已更改行的index
。)有关您所描述的类似内容的示例,请查看我使用react-virtualized构建的示例Twitter-like app。您可以看到来源here。
答案 1 :(得分:0)
if (this.props.list.length !== nextProps.list.length) {
cache.clearAll();
}
这对我有帮助! :)