如何使用useEffect和useState更改导航栏的颜色和位置



我试图为这个导航栏提供新功能https://reactstrap.github.io/?path=/docs/components-navbar--navbar首先,我希望它在向下滚动后更改颜色;

import {useState, useEffect} from 'react';
const [colorChange, setColorChange] = useState(false);
useEffect( () => 
window.addEventListener('resize', function(event){
let newWidth = window.innerWidth;
let newHeight = window.innerHeight; 
if(newHeight =< 300) {setColorChange={false}}
else {setColorChange={true}
}, [])
{colorChange ?    <Navbar className="navbar-expand-lg h6-nav-bar"
fixed="top"
color="dark"
> : <Navbar className="navbar-expand-lg h6-nav-bar"> }

请指出我的错误。

{setColorChange={false}}
else {setColorChange={true}

setColorChange是一个函数,所以你应该调用它,而不是赋值

setColorChange(false) // like this

我是个白痴,我用"resize"代替了"scroll"。

useEffect(() => {
const updateWindowDimensions = () => {
if(window.scrollY >= 300) {
setColorChange(true);
} else {
setColorChange(false);   
};
};
window.addEventListener("scroll", updateWindowDimensions);
return () => window.removeEventListener("scroll", updateWindowDimensions) 
}, []);

最新更新