如何测量react-virtualized列表中的行高
在测量react-virtualized列表中的行高时，可以采取以下步骤：
- 确定列表中的行数：首先，需要确定列表中的行数，可以通过获取数据源的长度或者其他方式来获取。
- 创建一个虚拟的列表容器：使用react-virtualized库提供的
List组件，创建一个虚拟的列表容器，并设置相应的属性，如width和height。 - 设置行高测量函数：在
List组件中，使用rowHeight属性来设置行高测量函数。这个函数会在渲染每一行时被调用，用于测量每一行的高度。 - 实现行高测量函数：在行高测量函数中，可以使用
measure函数来测量每一行的高度。measure函数接受两个参数：index表示当前行的索引，data表示当前行的数据。在函数内部，可以根据实际情况来计算行高，并返回结果。 - 获取行高数据：在
List组件中，可以使用onRowsRendered属性来获取渲染的行范围。通过这个范围，可以获取每一行的行高数据。 - 使用测量的行高数据：根据获取的行高数据，可以进行相应的操作，如动态调整列表容器的高度，或者在其他地方使用这些行高数据。
总结起来，测量react-virtualized列表中的行高可以通过以下步骤实现：确定行数，创建虚拟列表容器，设置行高测量函数，实现行高测量函数，获取行高数据，使用测量的行高数据。这样可以有效地测量并管理react-virtualized列表中的行高。
腾讯云相关产品推荐：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
对于如何使用实现列表的动态高度，我有点不确定。我有一个组件如下所示：<List rowCount={_.size(messages({ key, index, style }) => <Message style={style} {...messages[index]} />}}/>
我已经看过
浏览 24提问于2016-09-21得票数 5
当列表数据发生变化时，我需要更新行高。看起来，自从版本9中对支持React光纤的更改以来，CellMeasurer的唯一公共方法现在是measure()。当前的似乎没有任何关于新的公共方法的信息。不知道我是不是忽略了什么，但如果有任何帮助，我会很感激。
浏览 28提问于2017-05-08得票数 23
回答已采纳
假设一个react-virtualized List的每一行的内容都是可变的，那么DOM高度需要由一个rowHeight函数来计算--然而，由于在呈现该行之前会调用该函数，我不确定如何实际获得行的高度。给出的动态列表行高的例子基本上是在列表项的属性中偏离了一个预定义的数字，这是没有帮助
浏览 7提问于2017-12-06得票数 0
回答已采纳
我正在尝试创建一个具有动态行高的列表的原型。我正在尝试使用CellMeasurer来测量rowHeights。我正在从服务器获取列表项的html。它在某种程度上与facebook新闻提要中的一项相关。我需要动态地确定下面放置在下面提到的rowRenderer中的元素的高度。</div>
)
浏览 2提问于2017-10-06得票数 1
我有一个来自react-virtualized的List组件，其中我使用height prop来设置它的行高。但是，水平滚动条与最后一行重叠，因此很难看到最后一行的文本内容。有没有办法增加最后一行的高度，这样水平滚动条就不会与文本重叠。在处理实时增长的动态列表时，在代码中动态地这样做会把事情搞得一团糟。我尝试使用最后一个孩子的选择器，但没有成功。
浏览 10提问于2017-08-14得票数 0
我测量了我的每一行，并且通过子回调，每次单击子面板时，父状态中的一个属性都会更新。所述属性在react-virtualized List rowHeight()函数中使用，top检查该面板当前是否展开。然后，使用指向我的List的ref，对所述ref调用recomputeRowHeights(index)和forceUpdateGrid()方法。问题是，虽然List组件正确地更新了行的高度和位置，但动画并不流畅。我<
浏览 53提问于2017-01-20得票数 3
回答已采纳
我使用的是可扩展面板(Material)，在列中有一个反应虚拟化列表，并且一直存在高度自动调整的问题。我读过几篇这样的文章，以及一些关于react虚拟化站点上的动态行高的问题，但是我有一个特殊的问题，就是当面板展开/折叠后调整行高时，会出现一个“off by one”问题。以下是预期的行为：
浏览 2提问于2018-06-05得票数 4
我使用的是material-ui的List和ListItem组件。具体地说，我使用的是嵌套项功能。查看大约在页面的一半处，您将看到嵌套列表。一旦我添加了许多项，我意识到列表非常慢。所以我偶然发现了来自react-virtualized的AutoSizer。问题是:在react-virtualized中，我的代码需要为每一行提供一个rowRenderer函数。我不想失去内置的mate
浏览 0提问于2016-12-14得票数 15
1回答
我有一个react-virtualized列表，rows中的每个item都有一个expand button，当单击按钮时，行的高度发生变化，并展开并显示更多信息。这里的问题是，在单击按钮后，内部Grid (ReactVirtualized__Grid__innerScrollContainer) CSS高度属性没有更新，或者Gid没有重新呈现/通知行高的更改。在每次更新行项高度时，我应该做些什么来使
浏览 20提问于2022-09-30得票数 0
回答已采纳
我也在这里浏览过列表文档，。但是，我仍然无法理解如何在react-virtualized列表中动态设置行高。如何计算rowHeight道具函数中的高度？我可以像rowHeight={({ index }) => this.computeRowHeight({ index })}一样调用我的函数。但是，函数将如何计算行高？
以下是供参考<em
浏览 4提问于2016-12-30得票数 10
2回答
换句话说，类似于标准的DataGrid控件。
我的一个要求是动态调整网格单元格的大小以适应所提供的数据，这样就可以预先知道列的宽度和行高。(当用户滚动和新单元格进入视图时，列宽和行高不能波动。)这一要求意味着，当组件的dataSource或itemRenderer发生更改时，整个网格的“预度量”阶段将被执行。我想使用标准的Flex组件测量操作来执行这个预测
浏览 0提问于2009-06-12得票数 1
回答已采纳
我正在尝试使用react虚拟化来虚拟化一个列表，其中一些行具有不同的高度，并且列表占据了父目录中的所有空间。我正试图用CellMeasurer、AutoSizer和List组件来实现这一点。我的包版本如下：react-dom: "16.8.6"import React, { PureComponent
浏览 1提问于2019-08-16得票数 5
回答已采纳
我正在尝试使用ref引用react-virtualized中的可滚动列表。但是我的ref总是将它的当前属性显示为未定义。有谁知道如何使用ref with react-virtualized List吗？下面是我目前正在做的事情，但listRef.current始终是未定义的： const listRef = useRef()
width={350}
height=
浏览 68提问于2020-11-01得票数 1
1回答
即使在成功设置列表引用之后(如tree.js示例所示)，我似乎也无法使用 (也显示在tree.js示例中)成功地触发重新测量行高。
浏览 0提问于2017-06-28得票数 0
使用时，当您滚动list并设置相同的scrollToIndex时，它不会回滚到相同的索引。
有没有办法把列表重置回原来的位置？
浏览 5提问于2017-10-10得票数 2
2回答
在我正在开发的类似日历的应用程序中，我使用的是最健壮的组件。一些将要使用这个应用程序的人实际上并不需要虚拟化，因为整个数据表没有那么大。因此，我想要做的是继续使用react-
浏览 5提问于2017-10-21得票数 0
3回答
Excel单元格大小的默认测量单元是什么？是Point还是Pixel还是毫米波？如果行和列的单位是相同的，那么行高应该小于对列的宽度。但测量结果相反，行高</em
浏览 7提问于2017-11-17得票数 6
我计划在我的项目中实现react-virtualized，因为当前的解决方案不能处理动态高度。
在我的例子中，列表有不同的项目高度(高度取决于内容)。此外，这些项目可以根据需要进行扩展和减去。react-virtualized可以用流畅的动画处理这种功能吗？
浏览 4提问于2018-02-16得票数 0
回答已采纳
3回答
我在react-virtualized中使用了一个List组件来呈现大量的项目。在我的实现中，项目是分段的，并且我希望分段标题是粘性的，以便在用户向下滚动时，当前分段保持可见。本质上，我需要react-virtualized，以便在滚动位置改变时不破坏节标题(但继续破坏其他项)。现在有没有办法做到这一点？我对黑客持开放态度，只要他们不是太疯狂。
浏览 1提问于2016-11-09得票数 7
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
