作者:精英fd_241 | 来源:互联网 | 2023-02-04 15:55
我正在使用react-virualized 9与Autosizer,List和CellMeasurer组件.我需要在列表数据发生变化时更新行高.看来,自从版本9中支持React Fiber的更改以来,CellMeasurer的唯一公共方法现在是measure().大多数示例使用以前的resetMeasurementForRow()方法.当前的CellMeasurer doc似乎没有关于新公共方法的任何信息.不确定我是否忽略了某些东西,但感谢任何帮助.
const cache = new CellMeasurerCache({
defaultHeight: 60,
fixedWidth: true
});
{({ width, height }) => (
{ this.list = element; }}
rowCount={list.length}
rowHeight={cache.rowHeight}
rowRenderer={this.rowRenderer}
width={width}
/>
)}
rowRenderer({ index, key, parent, style }) {
return (
{ this.cellMeasurer = element; }}
rowIndex={index}
>
{({ measure }) => {
this.measure = measure.bind(this);
return ;
}}
);
}
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();
}
}
bvaughn..
27
我需要在列表数据发生变化时更新行高.当前的CellMeasurer doc似乎没有关于新公共方法的任何信息.
不可否认,就新的问题而言,文件可以得到改进CellMeasurer
.但在这种情况下,您需要做两件事来响应您的行数据/大小更改:
如果特定列表项已更改大小,则需要清除其缓存大小,以便可以重新测量.您可以通过调用做到这一点clear(index)
的CellMeasurerCache
.(通过已index
更改的行.)
接下来,您需要List
知道需要重新计算其大小信息.你通过电话来做到这一点recomputeRowHeights(index)
.(通过已index
更改的行.)
有关类似于您所描述内容的示例,请查看我使用react-virtualized构建的类似Twitter的应用程序示例.你可以在这里看到来源.
1> bvaughn..:
我需要在列表数据发生变化时更新行高.当前的CellMeasurer doc似乎没有关于新公共方法的任何信息.
不可否认,就新的问题而言,文件可以得到改进CellMeasurer
.但在这种情况下,您需要做两件事来响应您的行数据/大小更改:
如果特定列表项已更改大小,则需要清除其缓存大小,以便可以重新测量.您可以通过调用做到这一点clear(index)
的CellMeasurerCache
.(通过已index
更改的行.)
接下来,您需要List
知道需要重新计算其大小信息.你通过电话来做到这一点recomputeRowHeights(index)
.(通过已index
更改的行.)
有关类似于您所描述内容的示例,请查看我使用react-virtualized构建的类似Twitter的应用程序示例.你可以在这里看到来源.
谢谢您的回复和工作,布莱恩!