我试图为这个导航栏提供新功能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)
}, []);