React - 单击时显示/隐藏元素

Question

我正在使用 React hooks，我有 2 个组件：

1. 窗帘
2. 导航栏

这是我的组件代码Curtain：

    function Curtain(){

    return(
        <div className="curtain__div">
            <ul className="menu__items">
                <li className="about">abc</li>
                <li>def</li>
                <li>ghi</li>
                <li>klm</li>
            </ul>
        </div>
    );
}

export default Curtain;

这是我的组件代码NavBar：

    function NavBar(){

    const [show, setShow] = useState(false);


    return(
        <nav className="nav__bar">
           
            <ul className="menu">
               <li className="menu__icon" onClick={() => setShow(true)}><box-icon name='menu' color="floralwhite" size="md"/>
               <Curtain/>
             </li>
            </ul>
        </nav>
    );

}


export default NavBar;

我的问题：我想Curtain在用户单击 li 时显示该组件className="menu__icon"，并在用户再次单击它时隐藏该组件。

Answer 1

最简单的选择是根据您的状态有条件地返回组件：

return(
  <nav className="nav__bar">
    <ul className="menu">
      <li className="menu__icon" onClick={() => setShow(currentShow => !currentShow)}>
        <box-icon name='menu' color="floralwhite" size="md"/>
        { show ? <Curtain/> : null }
      </li>
    </ul>
  </nav>
);

要show再次关闭，您可以更改

onClick={() => setShow(true)}

而是像这样反转当前状态：

onClick={() => setShow(!show)}
// or
onClick={() => setShow(currentShow => !currentShow)}

（第二个选项在技术上更好，因为如果您要快速重复单击按钮，它可以避免竞争条件）