javascript - React Hooks - 滚动

Question

结案

显然我在放置内容的地方添加了一个固定的 div，所以唯一可滚动的是那个 div 而不是窗口。因此，如果我从内容 div 中删除 fixed，现在可以成功触发句柄滚动。谢谢

在 React Hooks 之前，我一直以旧方式使用 React，我能够在 ComponentDidMount 生命周期钩子(Hook)中毫无问题地创建事件监听器，并在 ComponentWillUnmount 中安全地删除它们；

我在 useEffect Hook 中尝试了相同的方法，但显然没有创建事件监听器，因此 handleScroll 从未调用过。对此有什么想法吗？

import React, { useEffect, useState, useRef } from 'react';
import './Navbar.scss';

const Navbar = () => {

    const [scrollY, setScrollY] = useState(0);
    const Position = useRef(null);  

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
    }, []);

    const handleScroll = () => {
        console.log(Position);
    }

    return (
        <div className="row">
            <div className="col-lg-12 p-0">
                <div className="Navbar" ref={Position}>
                    <ul>
                        <li><a href="/us">KDN</a></li>
                        <li><a href="/">Posts</a></li>
                        <li><a href="/">Talk </a></li>
                        <li><a href="/jobs">Jobs</a></li>
                    </ul>
                </div>
            </div>
        </div>
    );
};

export default Navbar;

Answer 1

这里的一个问题是初始 addEventListener 正在处理的范围。在常规 JS 中，您将始终在作用域中拥有当前值，但是，在钩子(Hook)中，您的代码将引用以前渲染中的陈旧值。在您的情况下，您的 Position 处于初始状态(空)。您实际上需要做的是删除依赖参数，以便在组件的每个渲染器上添加事件或添加对 Position.current 变量的依赖。所以你想要的是:

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

    return () => {
        window.removeEventListened('scroll', handleScroll);
    }
}, [Position.current]);

此外，在您的 handleScroll 函数中，您很可能希望 console.log(Position.current)