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

标签： reactjsreact-hooks

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;