javascript - 滚动到重新加载页面 react 的元素

Question

我试图弄清楚如何在页面重新加载后滚动到该元素。我正在尝试ref该元素并在页面重新加载后滚动到它。

我当前的示例将滚动到页面末尾

const transactionRef = useRef(null)
const scrollToElemet = () => {
    transactionRef.current.scrollIntoView({ block: 'end', behavior: 'smooth' });
  }

  useEffect(scrollToElemet)

return (
  <div ref={transactionRef}></div>
)

如何计算元素的位置并在页面重新加载时滚动到该位置？谢谢

Answer 1

添加此答案是因为在 React 中查询 DOM 是一种反模式:

export default function App() {
  const footerRef = useRef();

  useEffect(() => {
    footerRef.current.scrollIntoView();
  }, []);

  return (
    <>
      <div className="main">Main</div>
      <div ref={footerRef} className="footer">
        Footer
      </div>
    </>
  );
}