首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React虚拟化不适用于自动筛选器和无限加载程序

React虚拟化不适用于自动筛选器和无限加载程序
EN

Stack Overflow用户
提问于 2022-07-12 09:42:01
回答 1查看 346关注 0票数 0

我想在我的react应用程序中虚拟化一个大列表,并使用react-virtualized-auto-sizerreact-window-infinite-loader包。下面是我是怎么做到的。

代码语言:javascript
运行
复制
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

我真的很感谢你的帮助!!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-26 17:20:59

对不起,我会在这里给出一个更好的答案:我认为这是因为Autosizer的父母需要一个高度,让它工作。

见docs:https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#why-is-my-autosizer-setting-a-height-of-0

如果将.App容器强制设置为固定高度,您将看到列表

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72950209

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档