Динамические высоты строк с react-virtualized и новым CellMeasurer
Я использую react-virualized 9 с компонентами Autosizer, List и CellMeasurer. Мне нужно обновить высоты строк, когда данные списка изменились. Похоже, что, поскольку изменения для поддержки React Fiber в версии 9 единственным общедоступным методом для 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();
}
}
1 ответов
мне нужно обновить высоты строк, когда данные списка изменились. Текущий документ CellMeasurer, похоже, не имеет никакой информации о новых общедоступных методах.
по общему признанию, документы могут быть улучшены в отношении нового CellMeasurer
. В этом случае вам нужно сделать 2 вещи в ответ на изменение данных/размеров строк:
- если конкретный элемент списка изменил размер, вам нужно очистить его кэшированный размер, чтобы его можно было измерить. Вы сделайте это, позвонив
clear(index)
onCellMeasurerCache
. (Передайтеindex
из строки, которая изменилась.) - Далее вам нужно, чтобы позволить
List
знайте, что его размер информация должна быть пересчитана. Вы делаете это, позвонивrecomputeRowHeights(index)
. (Передайтеindex
из строки, которая изменилась.)
для примера чего-то похожего на то, что вы описываете, проверьте пример Twitter-как приложение я построил с react-virtualized. Вы можете увидеть источник здесь.