Динамическая высота строки с реагирующим виртуализированным и новым CellMeasurer

Question

Я использую реагирующую версию 9 с компонентами Autosizer, List и CellMeasurer. Мне нужно обновить высоту строки, когда данные списка изменились. Похоже, что после внесения изменений в поддержку React Fiber в версии 9 единственным открытым методом для 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();
  }
}

Answer 1

Мне нужно обновить высоту строки, когда данные списка изменились. В текущем документе CellMeasurer, похоже, нет никакой информации о новых открытых методах.

Следует признать, что документы могут быть улучшены в отношении новых CellMeasurer, В этом случае, однако, вам нужно сделать 2 вещи в ответ на изменение данных / размеров строк:

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

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

Answer 2

      if (this.props.list.length !== nextProps.list.length) {
  cache.clearAll();
}

Это помогло мне! :)