我可以更改什么以使此代码适用于所有部分元素

Question

所以我得到了这段代码，当该部分位于视口中时，它添加了一个类名，到目前为止，它只适用于第一个元素，因为我使用的是 querySelector，但如果我有机会 querySelectorAll 它不起作用。

我正在尝试在用户滚动页面时为每个部分添加动画，无论是向上还是向下。

import React from 'react';

const EffectComponent = () => {
  const vpPlitz = (element) => {
    const scroll = window.scrollY || window.pageYOffset;
    const boundsTop = element.getBoundingClientRect().top + scroll;

    const viewport = {
      top: scroll,
      bottom: scroll + window.innerHeight,
    };

    const bounds = {
      top: boundsTop,
      bottom: boundsTop + element.clientHeight,
    };

    return (
      (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom) ||
      (bounds.top <= viewport.bottom && bounds.top >= viewport.top)
    );
  };

  // Usage.
  document.addEventListener('DOMContentLoaded', () => {
    const answer = document.querySelector('section');

    const handler = () => {
      return vpPlitz(answer)
        ? answer.classList.add('section-animated')
        : answer.classList.remove('section-animated');
    };

    handler();
    window.addEventListener('scroll', handler);
  });

  return null;
};

export default EffectComponent;

更新：

感谢 Thet 的帮助，我能够更改 React。如果有人可能使用它，我会发布它。

import { useEffect } from 'react';

const EffectComponent = () => {
  useEffect(() => {
    const answers = document.querySelectorAll('section');

    const handler = (answer) => {
      return vpPlitz(answer)
        ? answer.classList.add('section-animated')
        : answer.classList.remove('section-animated');
    };

    window.addEventListener('scroll', () => {
      answers.forEach((answer) => handler(answer));
    });
  }, []);

  const vpPlitz = (element) => {
    const scroll = window.scrollY || window.pageYOffset;
    const boundsTop = element.getBoundingClientRect().top + scroll;

    const viewport = {
      top: scroll,
      bottom: scroll + window.innerHeight,
    };

    const bounds = {
      top: boundsTop,
      bottom: boundsTop + element.clientHeight,
    };

    return (
      (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom) ||
      (bounds.top <= viewport.bottom && bounds.top >= viewport.top)
    );
  };

  return null;
};

export default EffectComponent;```

Answer 1

querySelectorAll() 返回一个元素数组，因此，如果你想为每个元素添加或删除类，你需要遍历数组。例如，

    const answers - document.querySelectorAll('section');
    const handler = (answer) => {
       return vpPlitz(answer)
            ? answer.classList.add('section-animated')
            : answer.classList.remove('section-animated');
    };
    window.addEventListener('scroll',() => {
       answers.forEach(answer => handler(answer));
   })

您还应该在卸载组件时移除事件侦听器。您可以使用事件监听器：beforeunload。在其中运行与为 DOMContentloaded 运行的完全相同的函数，但将 window.addEventListener('scroll', handler(answer) 替换为 window.removeEventListener('scroll', handler(answer)。