时间戳

首页 > 解决方案 > React - 点击时显示/隐藏元素

javascript - React - 点击时显示/隐藏元素

问题描述

我正在使用 React 钩子，我有 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"并在用户再次单击它时隐藏。

标签： javascriptreactjsreact-hooks

解决方案

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

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)}

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

推荐阅读