Как поймать компонент Реакт при скролле страницы?

Question

[Павел Орловский]

У меня есть 5 компонентов с айдишниками и есть навигация с ссылками якорями. При клике активный элемент навигации меняет стиль. Но как мне ловить мои компоненты при скролле, что бы когда я докрутил до определенного компонента в стейте менять активный пункт в навигации?

Answer 1

[Антон Иванов]

Для этой задачи существует Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/I...

Comments

[Павел Орловский]

У меня есть вот такой компонент:

const App: React.FC = () => {
  const elementRef = useRef<HTMLElement>([] as any);

  useEffect(() => {
    console.log(elementRef.current);
  }, [elementRef]);
  return (
    <>
      <Header />
      <Nav />
      <About />
      <Contact />
      <Footer />
    </>
  );
};

export default App;

Как мне получить рефы компонентов Header, About, Contact в компоненте App?

[Антон Иванов]

Павел Орловский, посмотрите на forwardRef https://react.dev/reference/react/forwardRef