1

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

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

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

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

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

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

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

有任何想法吗？

更新：我有这个想法：

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

唯一的问题是：未应用滚动顶部:-(

这是我正在处理的组件。

4

1 回答 1

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/

于 2016-10-07T18:17:14.630 回答