问题标签 [react-window]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 为什么 react-window 会在每个 useState 事件上重新渲染列表?
我不明白为什么react-window 会在每个(所有) useState events 上重新渲染列表,这些值甚至没有连接到列表本身。有人可以解释一下这是如何在内部链接的,以及如何避免那些重新渲染?
我还尝试使用第二个 react-window areEqual 参数,但没有帮助。https://react-window.vercel.app/#/api/areEqual
任何关于如何解决这个问题的提示都非常感谢!提前谢谢了!
javascript - 带有 MUI 可折叠表格行的 React-Window
我正在寻求帮助解决我最近在使用 React-Window 和 MUI Collapsible Table Rows 时遇到的问题。
一般来说,react-window 为数组中的每个项目渲染行,其中一些内容隐藏,直到我们按下箭头。按下时,我们的列下方会出现一个带有隐藏内容的新列。
以上示例基于MUI Table 组件页面。当我将它传递给 React-Window 时出现问题,因为它的显示隐藏内容不合适。
我尝试使用 useRef() 来计算行高,但它对隐藏元素没有影响。
我愿意接受建议和解决方案。我在代码沙盒上创建了一个示例,其中包括它的实际工作方式以及我希望它如何(应该)工作。
javascript - react-window 根据内容高度设置项目大小
我正在使用 react-window 来实现一个聊天消息列表,但我在尝试为itemSize
每个项目设置权限时遇到了困难。碰巧的是,基于他的文本长度和窗口宽度的聊天消息并不总是前缀高度(或我可以以简单方式计算的高度)。
我目前正在使用 aVariableSizeList
并且代码看起来像这样
有没有办法将列表行的项目高度设置为其内容的实际高度?
javascript - React 虚拟化无限加载器
我一起使用“react-window-infinite-loader”“react-virtualized-auto-sizer”“react-window”,并注意到当组件安装时反应无限加载器会触发 loadMoreItems 。有没有办法解决它?
我试图在 MAC / UBUNTU / WINDOWS 上打开我的应用程序。该应用程序在 MAC 上运行良好,但在 Ubuntu / Windows 上 react-infinite-loader 会在初始加载时触发 loadMoreItems,这会导致 prevData.concat(newData) 并且用户会看到重复项。谁遇到过这个问题?
滚动可能有一些问题......
javascript - 使用 Intersection Observer 在 React 中渲染巨大的列表
我正在尝试在 React 中呈现大量数据。我知道我可以在这个用例中使用 react-window,但是想尝试一下我们是否可以使用 Intersection Observer API 实现类似的基于窗口的渲染。
我已经编写了这个组件来尝试相同的操作。但是在这里,我的组件正在渲染整个 10,000 个 div,即使它不在视口中,因为我正在迭代数据。如果元素不在类似于 react-window 的视口中,是否有任何方法可以防止渲染。先感谢您。
reactjs - 如何虚拟化反应表中的列
我们有一个用例来渲染超过 1000 列和 100 行(最大)。现在我们需要虚拟化列而不是行。
有没有办法在反应表中实现它?
reactjs - 使用 Autosizer 反应窗口
当我将 react-window 与 react-virtualized-auto-sizer 一起使用时遇到问题,我对官方示例进行了一些更改,然后列表消失了。我想知道为什么?谢谢大家帮忙~~
沙箱:https ://codesandbox.io/s/bvaughn-react-window-fixed-size-list-vertical-forked-utczn?file=/index.js
当您删除组件div
中的节点时Example
,一切正常。
javascript - 反应窗口滚动到底部
我正在使用 react-window 呈现一个长列表来显示消息。但是如何将每条新消息的滚动滚动到底部?
我可以通过使用 useRef 来处理普通的 Div,但是 react-window 呢?
和:
reactjs - 如何在 React/Next 中正确虚拟化高度可变的卡片网格?
我在一个网站上工作,在一个网站上展示了许多彼此相邻的卡片游戏。高度和宽度可以变化(行高由行中的 talles 元素确定,宽度由可用空间和列数定义(台式机上 4 个,平板电脑上 2 个,移动设备上 1 个)
在加载时,我获取 48 个游戏并显示它们。在底部有一个加载更多按钮,加载 48 个更多,直到没有更多可获取。
在运行灯塔时,我得到了很好的分数,但我收到了“避免过度的 dom 大小”的警告,并想解决这个问题。
阅读反应窗口或反应虚拟化让我感到困惑,即使在盯着文档数天后,尝试实施它并在谷歌上寻找我决定在这里询问的解决方案都没有成功。就好像我在研究虚拟化时全身心地陷入了完全的锁定。我可以虚拟化一个列表,但在虚拟化一个网格时遇到了巨大的麻烦。
这是回购:Github
有人可以将我推向正确的方向或帮助我实现此目标或以其他方式解决此问题吗?提前致谢