问题标签 [react-virtualized]

(This question pertains to the react-virtualized library)

I have a component that uses <List> to display several categories of items. The resulting output looks something like:

I'd like to use the "Jump to" links to scroll to the start of the corresponding section in the list. If I scroll around some I'd like subsequent clicks of the jump link to take me back to the section.

The first time I click the "Nebulae" link it works fine, but nothing happens on subsequent clicks. I assume this is because scrollToIndex is a prop and doesn't change after the first click. I've tried using forceUpdateGrid but it doesn't seem to reset the scroll position.

Is there a way to jump to the same index multiple times in a row?

我有一个使用react-virtualized'sList进行虚拟滚动的组件，其中每一行要么是类别标题，要么是属于该类别的实际内容。所以像：

（类别标题的位置Fruits和位置）Grains

当用户滚动时，如果他们滚动过类别标题，我希望能够从该行中获取数据并将其呈现在“粘性”（引号中，因为position: sticky这还不是一个真正可行的选项）容器中，坚持滚动容器的顶部，直到它们滚动超过下一个类别标题，依此类推。（基本上，滚动浏览艺术家的方式与 iOS 音乐应用程序中的工作方式相同。）

棘手的是，我希望这个粘性标题仍然在滚动容器内，而不是覆盖它或坐在它上面，并且它需要填充其父容器的宽度，这排除了在List组件之外渲染粘性容器并用position: absolute.

据我所知，目前似乎真的不可能做这样的事情react-virtualized——因为所有行都是绝对定位的，所以无法在滚动容器内创建一个“粘性”行。绝对定位粘性标题会起作用，但前提是所有其他行都静态定位在正常文档流中。

现在有可能实现像粘性标题这样的东西react-virtualized吗？如果没有，需要什么来react-virtualized支持他们？

谢谢！

描述

我有一个可能在 react-virtualized 中呈现的项目列表VirtualScroll。
列表中的每个项目（行）都有相当多的元素，其中一个会打开上下文菜单。我正在尝试使用react-tether在 HTML 上呈现该菜单body（以便当项目位于可滚动列表的底部/顶部时它不会隐藏）并在用户滚动列表时将菜单“卡在”我的项目上.
我的问题是更新绑定菜单的位置有明显的滞后。

到目前为止我采取的一些步骤：

1. 呈现了一个简单的列表，没有VirtualScroll. 系留菜单呈现流畅，没有明显的卡顿。这就是我得出的结论是问题出在react-virtualized
2. 按照此处的建议，将我rowRenderer的简化为仅菜单触发器。
3. 在行组件中实现shouldComponentUpdate。这大大提高了感知性能，大大减少了延迟，但仍然很明显。
4. 检查了 Chrome devtools 的时间线。Grid.js我看到由和触发的回流tether.js。

库版本：

• react-virtualized v. 7.24.3（大型项目，尚未准备好迈向 8.x 的步骤）
• 反应系绳 v. 0.5.2
• 反应 v. 15.2.1

工作演示

https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f

截屏：

我有一个启用列排序的反应虚拟化表。我的计划是在filter icon列标题旁边添加一个，并在有人单击它时弹出 Material-UI 弹出框。

所以这就是我所做的：我启用了 headerRenderer

headerRenderer= {this.renderHeader}

我的 headerRenderer 返回一个组件

ColumnFilterContainer 如下。

但是，当我单击 svg 图标时，它会消除“测试”，但也会使用表格。我怎样才能实现我想做的事情。可行吗？

谢谢

我目前有一个项目列表，例如<ul><li/><li/>...</ul>，每个都用display: inline-block. 这些项目不是固定的高度或宽度，尽管我可以将它们固定，并且每个都包含一个缩略图，有时还包含文本。

该列表会随着窗口宽度的变化而自动换行，没有水平滚动条。例如，列表可能以 3 个项目开始，这些项目都水平放置在窗口内的一行中：

然后添加了更多项目，这些项目开始换行到第二行：

然后，如果窗口宽度发生变化，项目将重新包装：

当有数千个项目时，性能肯定会受到影响，所以我想看看是否有办法虚拟化列表。从我对文档的阅读来看，React Virtualized 库目前似乎不支持这一点，但我想检查一下。该Collection组件看起来可能很接近，但我认为它不希望在调整窗口大小时动态改变宽度或高度。

如果这种项目包装是可能的，是否有任何示例实现？

我正在使用Listreact-virtualized 中的组件来呈现大量项目。在我的实现中，项目是分段的，我希望部分标题具有粘性，以便在用户向下滚动时当前部分保持可见。本质上，我需要 react-virtualized 不要在滚动位置更改时破坏节标题（但继续破坏其他项目）。现在有没有办法做到这一点？只要他们不太疯狂，我对黑客持开放态度。

react-virtualized 项目使我能够有效地渲染一个非常大的组件列表。在我的项目中，列表项是容器组件，即连接到 redux 存储的组件。他们只知道自己的 ID，而容器组件负责获取所有相关数据，例如正文、日期、用户名等。

我面临的问题是计算这些组件的高度。React-virtualized 有一个CellMeasurer 组件用于计算动态高度，但 CellMeasurer 测量组件默认状态的高度，在我的容器组件中为 0，因为容器组件在渲染第一个时尚未获取数据时间。

有没有办法在容器加载内容时强制重新计算组件高度？

似乎 React-Virtualized 不支持开箱即用的动画，但是否有可能（并且合理？）用于ReactCSSTransitionGroup实现过渡？

在我的情况下，我想对虚拟化列表中的元素进行移除动画（例如，淡化不透明度或缩小高度）转换。

我想通过 cdnjs 和 SystemJS 在 Web 应用程序中使用 react-virtualized。

从我看到的所有示例来看，react-virtualized 和 react 库似乎是在本地加载的，然后在包含在网页中之前与 Webpack 捆绑在一起。现在我想通过没有 Webpack 的 cdnjs 使用它，只需使用 SystemJS 导入它。但是当我尝试这样做时，我收到错误说它找不到 React。

我想知道是否有人以前尝试过这个，以及反应虚拟化是否完全支持这一点。谢谢。

更新： 为清楚起见，我包含了一些代码来显示我正在尝试做的事情。

索引.html：

主.jsx：

我在“反应虚拟化”列表中有一个交互组件，它作用于点击。单击组件时，单元格会发生变化，即高度会发生变化。

我的 rowRenderer 的第一个版本：

单击该消息时，会出现一个文本字段。这会改变高度。然而，发生的是组件在下一条消息上呈现。

发生这种情况是因为 UI 和 CellMeasurer 中的 Message 实例不同，如您所见：

List 创建的实例显然包含正确的状态，但 CellMeasurer 不知道此状态。

我测试了以下方法，但我非常怀疑这是正确的方法吗？我只是自己缓存 UI 组件实例：

这解决了这个问题，但可能会引入许多其他问题。这样做的正确方法是什么？

（我知道使用 Flux/Redux/global state 可以解决这个问题，但我想知道这里是否缺少一些基本的反应虚拟化功能/方面。）