Question

List component的react-virtualized提供了一个属性scrollToIndex，可以滚动到当前不可见的列表项。

官方tree example构建了一个层次结构列表，其中包含分层堆叠的ul元素 - 正如预期的那样。

因此，如果索引x滚动到，则此行包含驻留在此特定树元素下的整个层次结构。

在我的情况下，一级元素很少。但在3级中，最多有600个元素。因此，能够将级别3的元素滚动到视图中非常重要。

遗憾的是scrollToIndex不能用于此，因为所有这600个元素都包含在同一个顶级索引中。

我能想象到这一点的唯一方法是通过分层创建完整的反应虚拟化List组件而不是ul元素。然后，为了将元素滚动到视图scrollToIndex，将在每个层次级别从上到下调用。

不知何故，我觉得必须有一种更简单/更可行的方法来做到这一点。

有什么想法吗？

更新：我有这个想法：

构建一个计算分层树中活动节点上方行数的函数
将其与行高相乘
将其应用于scrolltop组件

List

唯一的问题是：不应用scrolltop： - （

This是我正在处理的组件。

Answer 1

你的直觉在这里是正确的。您无法使用scrollToIndex按照您描述的方式在大行中滚动。但是，您可以使用scrollTop属性。（内部Grid只是将索引转换为滚动偏移量。）

function render ({ scrollToIndex, ...rest }) {
  // Convert scrollToIndex to scrollStop
  const scrollTop =
    rowOffset + // Position of row within List
    innerOffset // Position of inner target within row

  return (
    <List
      scrollTop={scrollTop}
      {...rest}
    />
  )
}

PS：这是一个非常酷的树组件，建立在react-virtualized之上。以为你可能会觉得有趣：https://fritz-c.github.io/react-sortable-tree/

如何在反应虚拟化的深层次列表中滚动到索引

1 个答案: