如何在 react-virtualized 中滚动到深层分层列表中的索引

Question

List component of react-virtualized 提供属性 scrollToIndex 以允许滚动到当前不可见的列表项。

官方 tree example 使用分层堆叠的 ul 元素构建分层列表 - 正如预期的那样。

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

就我而言，一级元素很少。但是在第 3 层中有多达 600 个元素。因此，能够将级别 3 的元素滚动到视图中非常重要。

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

我能想到的唯一可行的方法是分层创建整个反应虚拟化列表组件而不是 ul 元素。然后为了将元素滚动到视图中 scrollToIndex 将在每个层次级别上自上而下调用。

不知怎的，我觉得一定有更简单/更可行的方法来做到这一点。

有什么想法吗？

更新：我有这个想法：

构建一个函数来计算分层树中活动节点上方的行数
乘以行高
将此应用到 List 组件中的 scrolltop

唯一的问题是：未应用 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/

如何在 react-virtualized 中滚动到深层分层列表中的索引

how to scroll to index in deeply hierarchical list in react-virtualized

react-virtualized