Div 标签在反应中不会滚动到底部

Question

这是 React 应用程序中面板的

<Content />

部分，其中包含

<Navbar />

和

<Content />

。我正在使用 tanstack 路由器来渲染子路由。包含

div

 的 

ref

标签存在问题

我想知道为什么当

div

更改时，这个

shouldScroll

标签不会滚动到底部。有人可以帮我找出原因吗？

这是代码：

import { createContext, useContext, useEffect, useRef, useState } from "react";

const ContentContext = createContext({
  triggerScroll: () => {},
});

function Content() {
  const ref = useRef(null);

  const [shouldScroll, setShouldScroll] = useState(false);

  const triggerScroll = () => {
    setShouldScroll((prev) => !prev);
  };

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

  return (
    <ContentContext.Provider value={{ triggerScroll }}>
      <div
        ref={ref}
        className="border relative h-[calc(100%-5.25rem)] overflow-auto rounded p-4"
      >
        <Outlet />
      </div>
    </ContentContext.Provider>
  );
}

export function useContent() {
  return useContext(ContentContext);
}

export default Content;