Виртуализация в сочетании с WindowScroller и AutoSizer в большом списке отображает не все элементы

Question

У меня большой список из более чем 300 наименований. Для лучшей производительности я хочу использовать реагирующую виртуализацию и отображать только видимые в данный момент элементы на экране. По причинам дизайна я должен использовать WindowScroller, и в зависимости от размера экрана список может иметь различную ширину.

Поэтому я использую WindowScroller и Autosizer. Я могу прокрутить вниз весь список из 70 элементов, но он останавливает рендеринг после 30 элементов списка (которые есть, прежде чем я начну прокручивать). Количество отображаемых элементов зависит от видимого пространства (проверяется с помощью открытой и закрытой консоли из codesandbox.io).

Я думаю, что у меня есть ошибка в использовании, но я не знаю, что я делаю неправильно.

Полный пример: https://codesandbox.io/s/64lzm266n

Я искал на stackru и на странице вопросов о реагирующей виртуализации, но coukd не нашел решения. Я надеюсь, что кто-нибудь может мне помочь.

Answer 1

У меня есть решение, представленное в проблемах GitHub ( https://github.com/bvaughn/react-virtualized/issues/1216) этого проекта.

Я не добавил параметр стиля и не дал scrollTop из WindowScroller компоненту List. Вы можете проверить исправленную версию на https://codesandbox.io/s/7yzzw92xw1

Кредиты и благодарность Анагорскому