React-virtualized в сочетании с WindowScroller и AutoSizer в большом списке не отображает все элементы

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

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

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

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

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


person Radhad    schedule 17.09.2018    source источник


Ответы (1)


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

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

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

person Radhad    schedule 18.09.2018
comment
отличное спасибо - person nrmad; 30.06.2021