EventListener 在 React 組件中不起作用

Question

對於我的頁面，我使用 function，在路由更改后將頁面設置為頂部scrollTo(0, 0); .

在這些頁面上，我在向下滾動 100px 時將 css class 添加到我的 header 中：

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

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

當我打開某個模式（頁面）時， scrollTo(0, 0); 對於那些模態頁面被禁用，因為如果我關閉模態（和 go 返回上一頁）我想在我來自的頁面上的同一個 position 上。

現在我必須將相同的 css class 添加到此模態的 header 中。 我現在不能使用window object。

我嘗試了以下方法，但這還不行：

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', onScroll);
  }, []);

  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 沒有添加/工作？ 我如何讓這個工作？

Answer 1

我所做的一些工作：

 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])

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