使用react中的IntersectionObserver更改滚动标题的样式

Question

下面的代码在简单的Html&JavaScript可以很好地根据页眉下方部分的可见性来更改页眉样式。参考

observer.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);

上面的observer.js文件针对的是下面index.html中引用的元素。

index.html

<header>…Some nav links</header>
<section class="home-intro">...</section>
<script src="js/observers.js"></script>

现在，我想在我的React应用程序中实现这一功能。这里的问题是，在上面的实现中，观察器(sectionOne(和目标(header(察者(某个部分或div(和目标(header(在它们各自的组件中。

那么，我应该在哪个组件中创建这个IntersectionObserver-Header(目标(组件或具有部分(observer(的组件，以及如何引用另一个？

Answer 1

理想情况下，你的头和节不应该在react之外，它应该在第一个被渲染的react组件中(通常是App.js中的默认组件(。也就是说，在react中，你可以用Ref获取这些DOM节点，然后将其传递给另一个react组件或钩子与它们交互。