Динамические высоты строк с 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 вещи в ответ на изменение данных/размеров строк:

  1. если конкретный элемент списка изменил размер, вам нужно очистить его кэшированный размер, чтобы его можно было измерить. Вы сделайте это, позвонив clear(index) on CellMeasurerCache. (Передайте index из строки, которая изменилась.)
  2. Далее вам нужно, чтобы позволить List знайте, что его размер информация должна быть пересчитана. Вы делаете это, позвонив recomputeRowHeights(index). (Передайте index из строки, которая изменилась.)

для примера чего-то похожего на то, что вы описываете, проверьте пример Twitter-как приложение я построил с react-virtualized. Вы можете увидеть источник здесь.