Javascript ReactJS-更改滚动条上的导航栏颜色

我有以下代码：

import React, {useState} from 'React';
import Header from './styles.js';

const HeaderComponent = props => 
{
  const [navBg, setNavBg] = useState(false);
  const isHome = props.name === 'Homepage' ? true : false;

  const changeNavBg = () =>
  {
   window.scrollY >= 800 ? setNavBg(true) : setNavBg(false);
  }

  window.addEventListener('scroll', changeNavBg);

  return (
  <Header {...(isHome && navBg ? { backgroundColor: '#00008' : {})} />
  )
}

import React，{useState}来自“React”；
从“/styles.js”导入标题；
const HeaderComponent=props=>
{
const[navBg，setNavBg]=useState（false）；
const-isHome=props.name=='Homepage'？true:false；
const changeNavBg=（）=>
{
window.scrollY>=800？setNavBg（真）：setNavBg（假）；
}
window.addEventListener（'scroll'，changeNavBg）；
返回(
)
}

我试图实现的是，当滚动超过800px时，我希望我的标题改变颜色

---

为您的时间干杯。

以下是一些您可以尝试的方法

1.使用React UI事件

返回(
)

2.考虑将侦听器绑定到<代码>使用效果< /代码>

import React，{useState}来自“React”；
从“/styles.js”导入标题；
const HeaderComponent=props=>{
const[navBg，setNavBg]=useState（false）；
const-isHome=props.name=='Homepage'？true:false；
const changeNavBg=（）=>{
window.scrollY>=800？setNavBg（真）：setNavBg（假）；
}
useffect（（）=>{
window.addEventListener（'scroll'，changeNavBg）；
return（）=>{
window.removeEventListener（'scroll'，changeNavBg）；
}
}, [])
返回(
)
}

实际上，我已经通过在my styles.js中将navBg作为道具传递并在那里检查它是否设置为true&isHome来修复它。我会把你的答案标记为正确，因为你应得的努力。谢谢，很好。谢谢无论如何，这里有一个有效的例子