问题标签 [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.

0 投票
1 回答
255 浏览

reactjs - 为什么 react-window 会在每个 useState 事件上重新渲染列表?

我不明白为什么react-window 会在每个(所有) useState events 上重新渲染列表,这些值甚至没有连接到列表本身。有人可以解释一下这是如何在内部链接的,以及如何避免那些重新渲染?

react-window useState 重新渲染

我还尝试使用第二个 react-window areEqual 参数,但没有帮助。https://react-window.vercel.app/#/api/areEqual

任何关于如何解决这个问题的提示都非常感谢!提前谢谢了!

0 投票
0 回答
241 浏览

javascript - 带有 MUI 可折叠表格行的 React-Window

我正在寻求帮助解决我最近在使用 React-Window 和 MUI Collapsible Table Rows 时遇到的问题。

一般来说,react-window 为数组中的每个项目渲染行,其中一些内容隐藏,直到我们按下箭头。按下时,我们的列下方会出现一个带有隐藏内容的新列。

以上示例基于MUI Table 组件页面。当我将它传递给 React-Window 时出现问题,因为它的显示隐藏内容不合适。

我尝试使用 useRef() 来计算行高,但它对隐藏元素没有影响。

我愿意接受建议和解决方案。我在代码沙盒上创建了一个示例,其中包括它的实际工作方式以及我希望它如何(应该)工作。

0 投票
0 回答
143 浏览

javascript - react-window 根据内容高度设置项目大小

我正在使用 react-window 来实现一个聊天消息列表,但我在尝试为itemSize每个项目设置权限时遇到了困难。碰巧的是,基于他的文本长度和窗口宽度的聊天消息并不总是前缀高度(或我可以以简单方式计算的高度)。

我目前正在使用 aVariableSizeList并且代码看起来像这样

有没有办法将列表行的项目高度设置为其内容的实际高度?

0 投票
0 回答
107 浏览

reactjs - MUI 5 带有用于带有多行文本标签的自动完成组件的 react-window

我正在使用 MUI 5 自动完成组件和一个长列表的选项属性因为我在用户单击选择的时间和列表打开的时间之间有一些延迟我正在尝试添加“react-window”VariableSizeList到选项列表以获得更好的性能。

它正在工作,但是当列表有一个长文本项(超过 1 行)时,CSS 看起来很糟糕:

在此处输入图像描述

自动完成 JSX:

和列表框组件:

和渲染行 JSX:

我的猜测是因为我必须在 ListBoxComponent 中设置 itemSize 值,但我找不到如何为多行项目正确设置它的方法。

0 投票
0 回答
32 浏览

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) 并且用户会看到重复项。谁遇到过这个问题?

滚动可能有一些问题......

0 投票
0 回答
182 浏览

javascript - 使用 Intersection Observer 在 React 中渲染巨大的列表

我正在尝试在 React 中呈现大量数据。我知道我可以在这个用例中使用 react-window,但是想尝试一下我们是否可以使用 Intersection Observer API 实现类似的基于窗口的渲染。

我已经编写了这个组件来尝试相同的操作。但是在这里,我的组件正在渲染整个 10,000 个 div,即使它不在视口中,因为我正在迭代数据。如果元素不在类似于 react-window 的视口中,是否有任何方法可以防止渲染。先感谢您。

0 投票
1 回答
69 浏览

reactjs - 如何虚拟化反应表中的列

我们有一个用例来渲染超过 1000 列和 100 行(最大)。现在我们需要虚拟化列而不是行。

有没有办法在反应表中实现它?

0 投票
1 回答
147 浏览

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,一切正常。

0 投票
1 回答
55 浏览

javascript - 反应窗口滚动到底部

我正在使用 react-window 呈现一个长列表来显示消息。但是如何将每条新消息的滚动滚动到底部?

我可以通过使用 useRef 来处理普通的 Div,但是 react-window 呢?

和:

0 投票
0 回答
21 浏览

reactjs - 如何在 React/Next 中正确虚拟化高度可变的卡片网格?

我在一个网站上工作,在一个网站上展示了许多彼此相邻的卡片游戏。高度和宽度可以变化(行高由行中的 talles 元素确定,宽度由可用空间和列数定义(台式机上 4 个,平板电脑上 2 个,移动设备上 1 个)

在加载时,我获取 48 个游戏并显示它们。在底部有一个加载更多按钮,加载 48 个更多,直到没有更多可获取。

在运行灯塔时,我得到了很好的分数,但我收到了“避免过度的 dom 大小”的警告,并想解决这个问题。

阅读反应窗口或反应虚拟化让我感到困惑,即使在盯着文档数天后,尝试实施它并在谷歌上寻找我决定在这里询问的解决方案都没有成功。就好像我在研究虚拟化时全身心地陷入了完全的锁定。我可以虚拟化一个列表,但在虚拟化一个网格时遇到了巨大的麻烦。

这是回购:Github

有人可以将我推向正确的方向或帮助我实现此目标或以其他方式解决此问题吗?提前致谢