Question

关闭案例

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

在React Hooks之前，我一直使用过旧的React，并且l能够在ComponentDidMount生命周期挂钩中创建事件监听器而没有任何问题，并可以在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中，您将始终在范围内拥有当前值，但是在挂钩中，您的代码将引用先前渲染中的陈旧值。在您的情况下，您的头寸处于初始状态（空）。实际上，您需要做的是删除依赖项参数，以便在组件的每个渲染器上添加事件，或在Position.current变量上添加依赖项。所以你想要的是这个

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

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

在您的handleScroll函数中，您很可能想console.log(Position.current)

Answer 2

为了触发事件，您需要渲染高度大于视口高度的元素。为了使用useEffect删除事件列表，您必须返回一个函数，该函数将在卸载时触发

例如

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

有关useEffect钩子的更多参考，请参考rect documentation

尝试此代码

<div className="row">
  <div className="col-lg-12 p-0">
    <div className="Navbar" ref={Position} style={{ minHeight: "150vh" }}>
      <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>

您还可以在this沙箱中看到有效的演示

反应钩-滚动

2 个答案: