如何在初始 React.js 渲染上存儲 HTML 元素 offsetTop 以與滾動事件偵聽器一起使用？

Question

當scrollY遇到offsetTop時，我正在制作一個“粘性” header ，但我不想硬編碼偏移量。 我一直在嘗試存儲初始offsetTop ，然后可以在附加到scroll偵聽器的isSticky()方法中對其進行檢查。

到目前為止，我一直無法確定價值（沒有雙關語），它似乎是正在運行的方法中的null 。

const ProfileHeader: React.FC<ProfileHeaderData> = ({ profile }) => {
    const bannerUrl = getBannerImageUrl(profile.id, null, profile.bannerImageVersion);
    const logoUrl = getLogoImageUrl(profile.id, null, profile.logoImageVersion);
    const headerRef = useRef<HTMLDivElement>(null);

    const [sticky, setSticky] = useState("");
    const [headerOffSet, setHeaderOffSet] = useState<number>(null);

    console.log(`Outside: ${headerOffSet}`);

    // on render, set listener
    useEffect(() => {
        console.log(`Render: ${headerRef.current.offsetTop}`);
        setHeaderOffSet(headerRef.current.offsetTop);

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

    const isSticky = () => {
        /* Method that will fix header after a specific scrollable */
        const scrollTop = window.scrollY;
        let originalOffset = headerOffSet ?? headerRef.current.offsetTop;
        if (headerOffSet === null) {
            console.log(`Setting header off set`);
            setHeaderOffSet(originalOffset);
        }
        console.log(`top: ${scrollTop} | offset: ${originalOffset} | state: ${headerOffSet}`);
        const stickyClass = scrollTop >= originalOffset ? styles.sticky : "";
        setSticky(stickyClass);
    };

    return (
        <div className={styles.container}>
            <div className={styles.bannerContainer}>
                {profile.bannerImageVersion && (
                    <Image
                        src={bannerUrl}
                        layout='fill'
                        className={styles.banner}
                    />
                )}
            </div>
            <div ref={headerRef} className={`${styles.header} ${sticky}`}>
                <div className={styles.logoContainer}>
                    {profile.logoImageVersion && (
                        <Image
                            src={logoUrl}
                            layout='fill'
                            className={styles.logo}
                        />
                    )}
                </div>
                <FlagCircleIcon {...profile.country} size={32} />
                <h1 className={styles.displayName}>{profile.displayName}</h1>
            </div>
        </div>
    )
}

在初始頁面加載時，我得到以下控制台 output：

當我開始滾動時，output 如下：

似乎從未設置過 state？

Answer 1

發現一篇博客文章解釋說您需要使用引用（ useRef ）並通過偵聽器內部的值訪問該值。

https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559

這引用了另一個 SO 帖子：

使用初始 state 反應 useState 鈎子事件處理程序