Пользовательский элемент прокрутки в реагирующем окне - PullRequest
Новая
       22

Пользовательский элемент прокрутки в реагирующем окне

0 голосов
/ 10 марта 2020

Я хотел бы создать виртуализированный список. У меня есть 100 000 предметов, но будет обработано только, например, 20 предметов (зависит от высоты окна). Когда пользователь прокручивает, новые элементы добавляться не будут, он меняет только те реквизиты, которые находятся за пределами экрана. Таким образом, пользователь видит все еще правильные элементы.

Я использую реагирующее окно библиотека в качестве альтернативы реагирующе-виртуализированный : 

import { FixedSizeList as List } from 'react-window'
...

const items = new Array(100000).fill({ title: '' })

const Item = ({ index, style }) => (
    <div key={index} style={style}>
        Item number {index}.
    </div>
)

const PageView = () => (
    <div style={{ overflowY: 'auto', height: '100vh' }}>
        <AnotherComponent />
        <AnotherComponent2 />
        <List itemSize={50} height={300} itemCount={items.length}>
            {Item}
        </List>
        <AnotherComponent3 />
    </Scrollable>
)

В этом В этом случае root div - это полноэкранный прокручиваемый элемент, а List - это также прокручиваемый элемент по высоте 300 пикселей. Чтобы убрать прокрутку из List Я должен установить высоту List в зависимости от количества предметов: 

<List itemSize={50} height={items.length * 50} itemCount={items.length}>

Теперь прокрутка в порядке (прокрутка только root div), однако List Рендеринг всех 100 000 предметов одновременно, потому что они вписываются в высоту List. Есть ли способ работы с List с пользовательским элементом прокрутки (или окном), как в этом реагирующе-виртуализированном примере с WindowsScroller, или мне нужно использовать react-virtualized?

...