Reactjs TypeError:无法读取属性'；getBoundingClientRect'；空的_Reactjs

Reactjs TypeError:无法读取属性'；getBoundingClientRect'；空的

reactjs

Reactjs TypeError:无法读取属性'；getBoundingClientRect'；空的,reactjs,Reactjs,我试图创建一个带有粘性效果的标题，但是在滚动页面时出现了这个错误，有时它会工作，有时会发生错误。有人能帮我解决这个问题吗 const EventPage:React.FC=（）=>{ 常数[isSticky，setSticky]=useState（false）； const ref=useRef（null）；常量handleScroll=（）=>{ 如果（参考当前的getBoundingClientRect（）.y{ window.addEventListener（“滚动”，handleSc

我试图创建一个带有粘性效果的标题，但是在滚动页面时出现了这个错误，有时它会工作，有时会发生错误。有人能帮我解决这个问题吗

const EventPage:React.FC=（）=>{
常数[isSticky，setSticky]=useState（false）；
const ref=useRef（null）；
常量handleScroll=（）=>{
如果（参考当前的getBoundingClientRect（）.y{
window.addEventListener（“滚动”，handleScroll）；
return（）=>{
removeEventListener（“scroll”，（）=>handleScroll）；
};
}, []);
返回(
事件页
{isSticky&&}

REF在重新渲染器上可以为null，因此在访问元素REF的属性之前，总是要进行null检查

consthandlescroll=（）=>{
如果（！ref.current）返回
如果（ref.current.getBoundingClientRect（）.y）的ref.current为falsy，则代码不应继续。如果为falsy ref.current，则代码应返回，请检查它为什么继续进行。
  const EventPage: React.FC = () => {
    const [isSticky, setSticky] = useState(false);
    const ref = useRef(null);

    const handleScroll = () => {
      if (ref.current.getBoundingClientRect().y <= -580 || null) {
        console.log(ref.current.getBoundingClientRect().y);

        setSticky(true);
      } else {
        setSticky(false);
      }
    };

    useEffect(() => {
      window.addEventListener("scroll", handleScroll);

      return () => {
        window.removeEventListener("scroll", () => handleScroll);
      };
    }, []);

    return (
      <div>
        <Head>
          <title>Event Page</title>
        </Head>
        <Header />
        <div className={`sticky-wrapper${isSticky ? " sticky" : ""}`} ref={ref}>
          {isSticky && <Sticky />}
        </div>