javascript - react-window中的自定义滚动元素

Question

我想创建虚拟化列表。我有 100 000 个项目，但只会呈现 20 个项目（取决于窗口高度）。当用户滚动时，不会添加新项目，它只会将道具更改为那些不在屏幕上的道具。所以用户看到仍然正确的项目。

我正在使用react-window库作为react-virtualized的替代方案：

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>
)

在这种情况下，根div是全屏可滚动元素并且List是 300px 高度也是可滚动元素。要从中删除滚动，List我必须根据项目数设置高度List：

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

现在滚动很好（可滚动只是 root div），但是List一次渲染所有 100 000 个项目，因为它们适合List. 有什么方法可以List使用自定义滚动元素（或窗口），就像在这个反应虚拟化示例中一样，WindowsScroller或者我必须使用react-virtualized？

标签： javascriptreactjsreact-virtualizedreact-window