我想在我的react应用程序中虚拟化一个大列表,并使用react-virtualized-auto-sizer
和react-window-infinite-loader
包。下面是我是怎么做到的。
import { FixedSizeList as List } from 'react-window'
import InfiniteLoader from 'react-window-infinite-loader'
import AutoSizer from 'react-virtualized-auto-sizer'
<AutoSizer>
{({ height, width }) => (
<InfiniteLoader
isItemLoaded={isItemLoaded}
itemCount={10}
loadMoreItems={loadMoreItems}
>
{({ onItemsRendered, ref }) => (
<List
className="List"
outerElementType="section"
innerElementType="ol"
height={height}
itemCount={10}
itemSize={75}
overscanCount={4}
onItemsRendered={onItemsRendered}
ref={ref}
width={width}
>
{Row}
</List>
)}
</InfiniteLoader>
)}
</AutoSizer>
但它在屏幕上什么也没有显示。如果我删除了AutoSizer
的用法,那么它就会像预期的那样工作。
您可以在这里检查行为:https://codesandbox.io/s/react-window-ep2rz3?file=/src/App.js:524-1261
我真的很感谢你的帮助!!
发布于 2022-07-26 17:20:59
对不起,我会在这里给出一个更好的答案:我认为这是因为Autosizer的父母需要一个高度,让它工作。
如果将.App容器强制设置为固定高度,您将看到列表
https://stackoverflow.com/questions/72950209
复制相似问题