Javascript 将类组件转换为功能组件-根据滚动位置展开/折叠标题

我的目标是把类组件变成函数组件

然而，我的功能组件实现的问题是，当我向上滚动时，标题会立即展开。我只希望在页面处于绝对顶部时标题可见

import React, { useState, useEffect } from "react";
import classnames from "classnames";

import "./header.styles.scss";

const Header = () => {
  const [isHidden, setIsHidden] = useState(0);

  const [prevScrollPos, setPrevScollPos] = useState(window.pageYOffset);

  useEffect(() => {
    function handleScrollChange() {
      setIsHidden(prevScrollPos < window.pageYOffset);
      setPrevScollPos(window.pageYOffset);
    }
    window.addEventListener("scroll", handleScrollChange);
    return () => {
      window.removeEventListener("scroll", handleScrollChange);
    };
  });

  return (
    <div
      className={classnames("header", {
        "header-hidden": isHidden,
      })}
    >
      <div className="logo-container">A & A Solutions</div>
      <div className="options">
        <div className="option">Option 1</div>
        <div className="option">Option 2</div>
        <div className="option">Option 3</div>
      </div>
    </div>
  );
};

export default Header;

import React，{useState，useffect}来自“React”；
从“类名”中导入类名；
导入“/header.styles.scss”；
常量头=（）=>{
常量[isHidden，setIsHidden]=useState（0）；
const[prevScrollPos，setPrevScollPos]=useState（window.pageYOffset）；
useffect（（）=>{
函数handleScrollChange（）{
setIsHidden（prevScrollPos{
window.removeEventListener（“滚动”，handleScrollChange）；
};
});
返回(
A&A解决方案
选择1
选择2
选择3
);
};
导出默认标题；

您可以检查

窗口。滚动

属性，查看它是否为0。这意味着窗口滚动条Y轴的顶部位于最顶部

function handleScrollChange() {
  setIsHidden(window.scrollY !== 0);
}

作为补充说明，我不认为每次发生副作用时都应该添加和清理事件侦听器。您可能会考虑对

useffect

使用

[]

依赖项，因为您可以省略对

prevScrollPos

如果你想运行一个特效并且只清理一次（在安装和 卸载），可以将空数组（[]）作为第二个参数传递。这 告诉React您的效果不依赖于道具的任何值 或状态，因此它永远不需要重新运行

---

如果你只想让页眉在页面处于绝对顶部时可见，我认为你可以尝试

setisheden（window.pageYOffset！==0）

你应该去掉第二个状态声明，你在每次滚动时都会改变这个状态，这是非常糟糕的性能，可能会造成一些副作用。如果你想检查这类事情，你应该使用refs。下面的投票人能在我的帖子中解释需要改进的地方吗？当我删除侦听器时，它将不再起作用。你不应该删除侦听器。我建议只在组件挂载时初始化它，在组件卸载时清理它，所以只需添加第二个括号作为另一个参数，函数只运行一次。好的，谢谢！我写了一封信，可以澄清我的建议。我在代码中添加了注释