使导航栏图标在各自组件处于视图中时改变颜色- React

Question

嗨，我正在制作一个单页投资组合网站作为React的实践。我有一个索引与多个组件，这是100vh部分。我的导航栏有4个图标，它们是字体Awesome图标，代表单页应用程序的4个部分。我想要实现的是，当我在主页部分，主页图标将有一个不同的颜色，然后当我从一个部分滚动到下一个他们各自的图标在导航栏的变化，以显示用户在哪个部分。

我已经尝试过使用帧运动useInView钩子，useRef钩子，并在索引中有一块状态，它将保持一个字符串(视图中组件的名称)，我传递给导航栏，并有一个条件，根据该字符串的值确定图标的样式(即。Home, about, contact等)

`export default function Home() {
const [inView, setInView] = useState("");
const homeSection = useRef(null);
const aboutSection = useRef(null);
const workSection = useRef(null);
const contactSection = useRef(null);
const isInView = useInView(homeSection);
useEffect(() => {
if (inView === "home") {
console.log(inView);
} else {
console.log("nope");
}
}, [inView]);
return (
<>
<div
className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))]
from-purple-600 via-violet-900 to-black flex flex-col "
>
<Navbar viewed={inView} />
<div ref={homeSection} {...(isInView ? () => setInView("home") : "")}>
<Banner />
</div>
<div ref={aboutSection}>
<About />
</div>
<div ref={workSection}>
<Work />
</div>
<div ref={contactSection}>
<Contact />
</div>
</div>
</>
);
}

我试着阅读文档，但我找不到任何我个人理解的东西，以我的知识水平。我不确定是否可能我需要有这些refs内的每个组件或有那些div包装器就足够了。不管怎样，它看起来就像状态inview;从来没有被设置过，因为控制台日志来自于us

type here

eEffect总是打印none

不幸的是，我的反应技能没有我希望的那么好!

Answer 1

你可以使用IntersectionObserver API来检测某个部分是否在视图中，基于此你可以维护一个状态来跟踪活动的部分。然后根据这个状态，你可以改变颜色。

useEffect(() => {
const homeObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// element is visible
setActiveRoute("home");
} else {
// element is hidden
}
});
});
homeObserver.observe(homeSection.current);
const aboutObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// element is visible
setActiveRoute("about");
} else {
// element is hidden
}
});
});
aboutObserver.observe(aboutSection.current);
...code for other sections
// clean up function to disconnect observer when component unmounts
return () => {
homeObserver.disconnect();
aboutObserver.desconnect();
...code for other sections
};
}, []);