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

Question

所以我得到了这段代码，当该部分位于视口中时，它添加了一个 class-name，到目前为止它只适用于第一个元素，因为我使用的是 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() returns 一个元素数组，因此，如果要向每个元素添加或删除类，则需要遍历数组。例如，

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

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

What can I change to make this code work with all section elements

javascript

reactjs

mern

react-router-dom