我正在使用带有Autosizer,List和CellMeasurer组件的react-viralized 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。但是,在这种情况下,您需要做两件事来响应行数据/大小的更改:
CellMeasurer
clear(index)
CellMeasurerCache
index
List
recomputeRowHeights(index)
有关类似于您所描述内容的示例,请查看我使用react- virtualized构建的类似Twitter的示例应用程序。您可以在此处查看源代码。