Javascript 反应窗口中的自定义滚动元素

我想创建虚拟化列表。我有10万件，但只有e。G将渲染20个项目（取决于窗口高度）。当用户滚动时，不会添加新项目，只会将道具更改为屏幕外的道具。所以用户可以看到仍然正确的项目

我使用图书馆作为替代方案：

---

现在可以滚动了（可滚动的只有root

div

），但是

List

一次呈现所有100000个项目，因为它们适合

列表的高度。有没有办法使用自定义滚动元素（或窗口）来使用
List
，比如使用
windowscroller
，或者我必须使用
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>
)


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