问题标签 [react-virtualized]

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 回答
1328 浏览

reactjs - 有没有办法在反应虚拟化中添加标题分隔数据

我有一个<List />inside an <InfiniteLoader />, inside an <AutoSizer />,also<WindowScroller /><WindowScroller /> (哇,那里有这么多hoc),但为了简单起见,我认为我的问题可以与一个简单的<List /> Component相同。

我不确定是否有办法呈现某种分隔符标题,例如下面呈现的部分(数据段)的标题。

由于每个项目都有一个prop允许将数据分组到块中,并且我收到的这些数据被排序和分组,如下所示:

这个想法是呈现如下内容:

在方法中进行一些计算rowRenderer

或者,因为我将 包装<List />在 an 中,所以<InfiniteLoader />我可以在 fire 时传递一个参数loadMoreRows,但无论如何我认为我必须在 中进行一些计算rowRenderer,负责最终的render.

0 投票
1 回答
334 浏览

javascript - React-Virtualized : CellRender 进入下一行

我正在使用 React 虚拟化表构建应用程序。我在每一行中添加了一些自定义单元格渲染。像标签,或一些 Img。

一切都很好,但有一个奇怪的行为。

在一个单元格中,我添加了一个简单的下拉菜单让用户选择一些值。实际上,我的下拉渲染位于下一行。单击后,下拉菜单会展开并保留在下一行下方。

有什么我错过的吗?这是正常行为吗?

0 投票
1 回答
9039 浏览

reactjs - 反应虚拟化,列表在滚动时闪烁/滞后

当我滚动浏览我的列表时遇到了一些问题。还要注意底部的巨大空间。见视频:https ://vimeo.com/215349521

据我所知,我没有犯任何重大错误。但我相信问题出在 CellMeasurer 上。

铬版本:58.0.3029.81

0 投票
1 回答
1603 浏览

reactjs - 重置/初始化 InfiniteLoader 的正确方法是什么

我正在尝试InfiniteLoaderreact-virtualize库中使用来显示一个可滚动的列表,该列表textSearch顶部有一个输入字段(用于过滤列表条目)。

我使用的代码非常接近InfiniteLoader 示例代码。该列表工作正常,但我不确定如何在更改InfiniteLoader时重置/初始化,searchText并且应该显示(完全)新数据。

流程是这样的:

  1. 该列表首次打开并显示来自redux store(工作正常)的数据。
  2. 用户更改textSearch和新数据被提取到store
  3. 此时,InfiniteLoader应该被初始化(我尝试resetLoadMoreRowsCache调用InfiniteLoader
  4. InfiniteLoader应该loadMoreRows第一次调用并使用新数据重新渲染

我已经看到INFINITELOADER DEMO具有相同的行为:通过单击“刷新缓存数据”,在我开始浏览列表之前没有任何反应。

所以我的问题是:重置/初始化的正确方法是什么?

0 投票
2 回答
26537 浏览

javascript - Dynamic row heights with react-virtualized and new CellMeasurer

I'm using react-virualized 9 with Autosizer, List, and CellMeasurer components. I need to update the row heights when the list data has changed. It appears that since the changes to support React Fiber in version 9 the only public method for CellMeasurer is now measure(). Most of the examples use the previous resetMeasurementForRow() method. The current CellMeasurer doc doesn't seem to have any info on the new public methods. Not sure if I've overlooked something but any help is appreciated.

0 投票
2 回答
7637 浏览

react-virtualized - 如何在反应虚拟化表中呈现自定义标题

在 docs - headerRowRenderer中,但任何人都可以使用一些自定义标头标记共享简单示例,例如自定义titleattr + 所有“默认”虚拟化功能,如可排序...

0 投票
1 回答
1769 浏览

reactjs - React-virtualized InfiniteLoader 不渲染任何东西

正如标题所示,InfiniteLoader 不会渲染任何项目。我似乎已经正确设置了所有内容,并且该集合有很多要渲染的项目,但页面上没有显示任何内容。这是渲染方法:

0 投票
1 回答
578 浏览

reactjs - React-Virtualizer InfiniteLoader startIndex 和 stopIndex 是相同的值

我正在使用 React-Virtualizer,似乎对加载行的初始调用的 startIndex 为 0,stopIndex 为 0。如果数组已经有一些项目,那么 startIndex 是数组长度,而 stopIndex 是相同的数组长度。我不确定为什么会发生这种情况,但显然这是一个问题。

您可以在此处查看可重现的示例:

https://plnkr.co/edit/TP5BTGNA0Me1Rz7Q7Ge9?p=preview

这是 JSX 文件:

0 投票
1 回答
2136 浏览

javascript - 表中的嵌套 Json - React-Virtualized

我正在使用“反应虚拟化”中的表。

我收到了一些我想在我的自定义行中显示的嵌套数据。我的问题是将嵌套的 json 绑定到我的 Column dataKey。

我的专栏

谢谢

0 投票
1 回答
2049 浏览

reactjs - 使用 css 类名和 react-virtualized 或 react-select

所以我试图将这两个模块集成到我的项目中,但我在处理它的 CSS 部分时遇到了困难。

我的项目正在使用 postcss 将我自己的 css 文件转换为“已编译”的 css 文件,并为每个文件添加了类名。react-virtualized 和 react-select 都有自己的 css 文件来定义样式,但是我不明白如何覆盖它们或将它们集成到我的项目中。

我的 webpack css 配置如下:

当我在我的主 app.js 文件中执行以下行时,我得到一个失败的 css 解析错误(意外令牌)。

我能够加载 CSS 样式的唯一方法是使用

意思是,将整个 CSS 复制到我自己的项目中,然后在没有 postcss 工作的情况下导入它。但是,我不知道这是否是最好的方法,因为它非常明确地使用这些模块。

有没有人有更好的解决方案?