Pertanyaan Ketinggian baris dinamis dengan react-virtualized dan CellMeasurer baru


Saya menggunakan re-virualized 9 dengan komponen Autosizer, List, dan CellMeasurer. Saya perlu memperbarui ketinggian baris ketika data daftar telah berubah. Tampaknya karena perubahan untuk mendukung React Fiber di versi 9 satu-satunya metode publik untuk CellMeasurer sekarang mengukur (). Sebagian besar contoh menggunakan metode resetMeasurementForRow () sebelumnya. Sekarang Dokumen CellMeasurer tampaknya tidak memiliki informasi tentang metode publik baru. Tidak yakin apakah saya telah melewatkan sesuatu tetapi bantuan apa pun dihargai.

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();
  }
}

5
2018-05-07 22:16


asal


Jawaban:


Saya perlu memperbarui ketinggian baris ketika data daftar telah berubah.   Dokumen CellMeasurer saat ini tampaknya tidak memiliki info tentang metode publik baru.

Diakui bahwa dokumen dapat ditingkatkan, sehubungan dengan yang baru CellMeasurer. Dalam hal ini, Anda perlu melakukan 2 hal sebagai respons terhadap perubahan data / ukuran baris Anda:

  1. Jika item daftar tertentu telah berubah ukuran maka Anda perlu menghapus ukuran cache-nya agar dapat diukur kembali. Anda melakukan ini dengan menelepon clear(index) di CellMeasurerCache. (Melewati index dari baris yang diubah.)
  2. Selanjutnya Anda harus membiarkan List tahu bahwa informasi ukurannya perlu dihitung ulang. Anda melakukan ini dengan menelepon recomputeRowHeights(index). (Melewati index dari baris yang diubah.)

Untuk contoh sesuatu yang mirip dengan apa yang Anda gambarkan, lihat contohnya Aplikasi mirip Twitter Saya membangun dengan bereaksi-virtual. Anda dapat melihat sumbernya sini.


9
2018-05-07 23:52