Изменить стиль заголовка при прокрутке, используя IntersectionObserver в реакции

Question

Следующий код, использующий IntersectionObserver в простом Html & JavaScript, прекрасно работает для изменения стиля заголовка в зависимости от видимости раздела чуть ниже заголовка. Ссылка

наблюдатель. js

const header = document.querySelector("header");
const sectionOne = document.querySelector(".home-intro");

const sectionOneOptions = {
  rootMargin: "-200px 0px 0px 0px"
};

const sectionOneObserver = new IntersectionObserver(function(
  entries,
  sectionOneObserver
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      header.classList.add("nav-scrolled");
    } else {
      header.classList.remove("nav-scrolled");
    }
  });
},
sectionOneOptions);

sectionOneObserver.observe(sectionOne);

Приведенный выше файл наблюдателя. js предназначен для элементов, указанных в индексе. html ниже.

index. html

<header>…Some nav links</header>

<section class="home-intro">...</section>

<script src="js/observers.js"></script>

Теперь я хочу реализовать эту функцию в своем приложении React. Вопрос здесь заключается в том, что в приведенной выше реализации и наблюдатель (sectionOne) и target (header) находятся в одном файле html, но в моем приложении React наблюдатель (некоторый раздел или div) и target (header) находятся в своих отдельных компонентах.

Итак, в каком компоненте я должен создать этот компонент IntersectionObserver - Header (target) или компонент, имеющий раздел (наблюдатель), и как мне ссылаться на другой?

Answer 1

В идеале, ваш заголовок и раздел не должны быть сторонними реакциями, они должны быть в первом реагирующем компоненте, который визуализируется (обычно это компонент по умолчанию в приложении. js). При этом в React вы можете получить эти DOM-узлы с помощью Refs , а затем передать его по другому компоненту реакции или подключить для взаимодействия с ними.