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

Question

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

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

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

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

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

我能想象到的唯一方法是分层创建整个 react-virtualized List 组件而不是 ul 元素。然后为了将元素滚动到视图中，scrollToIndex 将在每个层次结构级别上自上而下地调用。

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

有什么想法吗？

---

更新：我有这个想法：

• 构建一个函数，计算层次树中活动节点上方的行数
• 乘以行高
• 将此应用到scrolltopList组件中

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