单击div时，内联样式不希望更改

Question

单击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;

Answer 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;