单击div(菜单)时,我试图切换导航。控制台会记录showNav发生了更改,但是它不起作用。仅当我在div中手动更改样式时,它才起作用。
import React, { useContext } from 'react'
import { VegetarianContext } from '../contexts/VegetarianContext'
const Navbar = () => {
const { toggleVegetarian } = useContext(VegetarianContext);
let showNav = true;
return (
<div className="navbar" style={{visibility: showNav ? 'visible' : 'hidden' }}>
<nav>
<div className="close" onClick={() => {
showNav = !showNav;
console.log(showNav);
}}>
<img className="close" src={require("../img/tacomenu.png")} />
</div>
<ul>
<li><a href="/">Order</a></li>
<li><a href="/about">About</a></li>
<li className="vegetarian"><a onClick={toggleVegetarian}>Are you vegetarian?</a></li>
</ul>
</nav>
</div>
);
}
export default Navbar;
答案 0 :(得分:1)
如果要重新渲染某些组件,则应使用state
。
import React, { useContext } from 'react'
import { VegetarianContext } from '../contexts/VegetarianContext'
const Navbar = () => {
const { toggleVegetarian } = useContext(VegetarianContext);
//let showNav = true;
const [showNav, setShowNav] = React.useState(true);
return (
<div className="navbar" style={{visibility: showNav ? 'visible' : 'hidden' }}>
<nav>
<div className="close" onClick={() => {
//setShowNav(!showNav) // it works as Toggle
setShowNav(false) // it works as Close only
}}>
<img className="close" src={require("../img/tacomenu.png")} />
</div>
<ul>
<li><a href="/">Order</a></li>
<li><a href="/about">About</a></li>
<li className="vegetarian"><a onClick={toggleVegetarian}>Are you vegetarian?</a></li>
</ul>
</nav>
</div>
);
}
export default Navbar;