问题标签 [react-window]

I need to render long list via react-window library. I can't be sure that all rows will be the same size so it forces me to use VariableSizeList. So is there a way to calculate row height when you know only index of row and actual data to be rendered?

I think it's possible to render it somehow not visible to the end user and get height from but I'm not sure is it the right way.

我在react-window List 元素中使用 React/MUI Popover 并且无法正确定位 Popover - 它总是在窗口的左上角结束（组件无法执行 getBoundingClientRctd( ）在锚元素上[anchorEl在文档中]）。

所以为了暂时解决这个问题，我决定使用anchorPosition允许设置绝对位置的参数——在我的例子中，就在窗口的中间。那也不行。

我已经查看了 Chrome DevTools 中的值，一切似乎都很好（即，当我使用它时，我确实得到了一个 anchorEl；我得到了有效的 positionLeft/Top 值；等等......

可能是非常简单的事情，希望有人能指出我做错了什么。

编辑：解决方案的关键要素

1. Row组件必须在包含组件之外定义。
2. 该<List>组件有一个itemData属性，用于将自定义数据传递给Row.

编辑添加 react-window 列表渲染器。

这是基本设置：

弹出框渲染器

按钮元素渲染器

单击事件处理程序

反应窗口列表渲染器

我正在尝试实现react-window 但我不确定如何传入一个包含它自己的属性的组件

如果我有这样的事情

如何制作变量列表？

该示例未显示如何执行此操作

我想重新实现一个树组件来提高它的性能。我使用了 react-window 中的 FixedSizeList。它的工作相对较好。它甚至可以处理 100,000 个树节点。

我的问题是，我想为树节点的小开口三角形设置动画。以下css负责动画：

动画不起作用。因为在每次打开和关闭时所有的列表元素 div 都会重新渲染。然后我尝试为列表添加 itemKey 属性以帮助 React 重用 div。

它也不起作用。div 不会更新，而是重新渲染整个 div。这个问题有合适的解决方案吗？如何防止重新渲染？

这是整个示例：https ://codesandbox.io/s/a-quick-react-tree-component-based-on-react-window-tyxnm

我有一个Node正在运行的应用程序heroku。

现在我想对react-window我正在使用的包进行一些更改（我第一次尝试这个）

所以我分叉了react-windowrepo 并使用以下方法替换了原始包：

当我在本地机器上构建它时，一切都很好，并且使用了分叉的包。

但是当我尝试heroku在构建上部署它失败时，我收到了这个错误：

我试图指向一个特定的分支，但这也不起作用：

当我重新安装原始软件包时，一切都很好。

所以我的问题是：在部署到时添加分叉包的正确方法是什么heroku？

我在 itemCount 中给出了一个任意数字，因为我的列表长度未知。当我向下滚动时，infiniteloader 仅第一次正常加载数据。但是在我的窗口视图完全空白后它会加载。

假设我的数组列表在每次提取时包含 10 个项目。如何在向下滚动并及时显示内容时立即加载数据？

我正在寻找一种方法来知道使用 react-window 时屏幕上可以看到哪个列表项。

isVisible 道具错误地返回了可见性。

https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq

这可能是因为缓存项目，但我想知道是否有另一种方法来跟踪项目的可见性

我正在使用名为react-window 的库

当我像这样将道具传递给它的行时：

它给了我一个类似的错误：

React.createElement: type is invalid -- 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但是得到：...

正确的方法是如何做到这一点？

我正在使用名为react-window 的库

它是用于有效呈现大型列表和表格数据的库。

这是来自文档的示例代码：

我想要做的是用<div>或任何其他自定义组件包装 {Row} 。

因为我想实现一些样式并且还要折叠过渡。

请注意，我不能简单地这样做：

因为它将用包装器组件包装每个列表项，而不是用单个包装器组件包装整个列表。

我想用单个包装器组件包装整个列表。

我正在使用 FixedSizeList 来渲染非常大的数据，这要归功于 react-window 一切都是一个平滑的过程，输出更平滑。

几天来，我正在尝试使用 react-custom-scrollbars 添加一个垂直滚动条，我可以轻松地集成它并使其可用。但是我花了几天时间终于来到这里的问题是将垂直滚动条放在浏览器页面的末尾，就像一个粘性元素，这样用户就不需要水平滚动直到结束列表，然后垂直滚动。

我已将自定义滚动条放置在屏幕的右端。但是水平滚动也会滚动垂直滚动条。

代码显示了我打算做什么：

相关CSS：