使用useRef滚动到反应中的特定元素（附实例）

我有一个Firebase群组聊天界面，它有一个搜索功能。但是当我点击搜索结果时，我想转到那个特定的元素（在我的例子中是列表元素）。为了这个例子，我使用了名为useRef的react钩子，它获取当前元素，我们可以在我们的代码中获得它:

import React, { useRef } from 'react'
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>
 </> )}

现在，当我点击按钮时，它将寻找带有myRef的div，我们的视图将滚动到该div。