反应-通过键滚动到组件？

Question

我已经使用类似的逻辑实现了滚动：

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)   
// General scroll to element function

const ScrollDemo = () => {

   const myRef = useRef(null)
   const executeScroll = () => scrollToRef(myRef)

   return (
      <> 
         <div ref={myRef}>I wanna be seen</div> 
         <button onClick={executeScroll}> Click to scroll </button> 
      </>
   )
}

已为组件列表中的每个组件实现了这种类型的逻辑。 用户可以随意更改此组件列表（按某些条件对该列表进行排序）。

假设我有一个组件Comp4，该组件当前位于列表中的位置4中。 这意味着其ref将指向该位置4。这没有问题。

但是，如果Comp4现在已被排序机制移动到位置6，而我想使用其初始化的ref滚动到它，它将滚动到位置{{1 }}。

我该如何解决？