EventListener 在 React 组件中不起作用

问题描述

对于我的页面，我使用了一个函数，在路由更改后将页面设置为顶部 scrollTo(0,0);。

在这些页面上，当向下滚动 100 像素时，我将一个 css 类添加到我的页眉中：

useEffect(() => {
    const onScroll = () => {
      if (window.pageYOffset > 100) {
        fade(true);
      } else {
        setFade(false);
      }
    };

    window.addEventListener('scroll',onScroll);
    return () => window.removeEventListener('scroll',onScroll);
  },[]);

当我打开某个模式（页面）时，这些模式页面的 scrollTo(0,0); 被禁用，因为如果我关闭模式（并返回上一页），我想在页面上的相同位置我来自哪里。

现在我必须将相同的 css 类添加到此模式的标题中。我现在无法使用 window 对象。

我尝试了以下方法，但还没有奏效：

const Overlay = ({ children }: Props) => {
  const [fade,setFade] = useState(false);

  useEffect(() => {
    // const element = document.getElementById('overlayHeader');
    const element = document.documentElement;
    const prevTopOffset = element?.scrollTop;
    console.log(prevTopOffset);

    const scrolledOffset = prevTopOffset + 50;
    console.log(scrolledOffset);

    const onScroll = () => {
      if (prevTopOffset > scrolledOffset) {
        fade(true);
      } else {
        setFade(false);
      }
    };

    element.addEventListener('scroll',onScroll);
    return () => element.removeEventListener('scroll',[]);

  return (
    <React.Fragment>
      <Dialog fullScreen open={open} id="dialog">
        <header
          id="overlayHeader"
          css={fade && styles.fadedIn}
        >
        </header>
        {children}
      </Dialog>
    </React.Fragment>
  );
};

export default Overlay;

不知何故 EventListner 没有添加/工作？我如何让它工作？

解决方法

我所做的一些工作：

 const Quote = () => {
      
      const quotes = [// some logic // ]

      const [activeIndex,setActiveIndex] = useState(0)

      useEffect(() => {
       const timer = window.setInterval(() => {

      setActiveIndex(prev =>
        
        prev + 1 >= quotes.length ? 0 : prev + 1
      )
    },5000)

// return a cleanup callback that will stop the timer
    return () => {
      window.clearInterval(timer)
    }
  },[quotes])

我不知道它在你的情况下是如何工作的，但我希望我有所帮助。