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

问题

The List component of react-virtualized offers a property scrollToIndex to enable scrolling to a list item that is currently not visible.

The official tree example builds a hierarchical list with hierarchically stacked ul elements - just as expected.

So if index x is scrolled to, this row contains the entire hierarchy that resides under this specific tree element.

In my case there are very few level one elements. But in level 3 there are up to 600 elements. So it is important to be able to scroll an element of level 3 into view.

The scrollToIndex can unfortunately not be used for this as all these 600 elements are contained in the same top level index.

The only way I can imagine this to work is by hierarchically creating entire react-virtualized List components instead of ul elements. Then in order to scroll an element into view scrollToIndex would be called from top down on every hierarchical level.

Somehow I feel there must be an easier / more feasible way to do this.

Any ideas?

update: I had this idea:

build a function that counts the number of rows above the active node in the hierarchical tree
multiply that with the row height
apply this to scrolltopin the Listcomponent

Only problem is: scrolltop is not applied :-(

This is the component I'm working on.

回答1:

Your intuition is correct here. You can't use the scrollToIndex to scroll within a large row in the way you're describing. However you could use the scrollTop property instead. (Internally Grid is just converting the index to a scroll offset anyway.)

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: This is a pretty cool tree component built on top of react-virtualized. Thought you may find it interesting: https://fritz-c.github.io/react-sortable-tree/

来源：https://stackoverflow.com/questions/39920938/how-to-scroll-to-index-in-deeply-hierarchical-list-in-react-virtualized

标签

react-virtualized