React Virtualized onRowsRendered несколькими действиями - PullRequest
Новая
       15

React Virtualized onRowsRendered несколькими действиями

0 голосов
/ 04 октября 2019

Я пытался выяснить, как использовать React Virtualized Infinite loader onRowsRendered prop ..

Мои основные проблемы:

Я использую Infinite Loader для загрузки данных с определенными пороговыми значениями, каждыйКогда он достигает порогового значения, я получаю данные из API, который прекрасно работает, но мы решили также включить в список "Счетчик элементов Visibile" . И пока все, что я мог найти, это использовать onRowsRendered, и хотя он работает, он ломает функцию бесконечной загрузки и никогда не выбирает больше строк после достижения порога.

Базовый пример:

У меня есть списокэлементов и нижний колонтитул внизу: 

Item 1
Item 2
Item 3
...
Item 10
footer ---->  [ Showing 1 to 3 from 10 results]

После прокрутки список должен измениться на: 

Item 4
Item 5
Item 6
...
Item 10
footer ----> [ Showing 4 to 6 from 10 results]

И способы его реализации: 

     <InfiniteLoader
      isRowLoaded={({ index }) => !!this.props.trucks[index]}
      loadMoreRows={props.moreRows}
      rowCount={this.state.totalTrucks}
      >
      {({onRowsRendered, registerChild}) => (
         <List className="table table-bordered"
         ref={registerChild}
         onRowsRendered={({startIndex, stopIndex}) => 
              console.log(startIndex, stopIndex)
         }
         onRowsRendered={onRowsRendered}
        ...

(Используя оба в качестве примера, в действительности это либо один, либо другой, поскольку последний в любом случае перезаписывает первый)

Согласно документации React Virtualized /Бесконечный загрузчик onRowsRendered всегда должен выглядеть следующим образом: 

onRowsRendered={onRowsRendered)

И он отлично работает только с бесконечной загрузкой

Однако для реализации функции подсчета видимых строк я нашел ответ, что это должно бытьизменил на это: 

         onRowsRendered={({startIndex, stopIndex}) => 
              console.log(startIndex, stopIndex)
         }

PS Журнал консоли - только для меня, использую только одну из тех, которые отлично подходят для ONE CASE Мне было интересно, есть ли у кого-нибудьлюбые предложения, как объединить их оба в один, чтобы я мог получить индексы каждой строки для отображения нижнего колонтитула И сохранить функциональность бесконечного загрузчика.

Я слишком сильно ломал голову над этим и чувствовал себя законченнымидиот за неспособность понять это.

Любые предложения приветствуются!

...