Javascript 反应-单击时显示/隐藏元素

我使用的是React挂钩，我有两个组件：

幕

导航栏

以下是我的

窗帘
组件代码：

功能窗帘（）{
返回(

abc
def
ghi
荷航

);
}
导出默认窗帘；

以下是我的
NavBar
组件代码：

函数导航栏（）{
const[show，setShow]=useState（false）；
返回(

setShow（true）}>


);
}
导出默认导航栏；

我的问题:
我想在用户单击属于
className=“menu\u icon”
的li时显示
窗帘
组件，并在用户再次单击时隐藏该组件。
最简单的选项就是根据您的状态有条件地返回组件：

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

要反转当前状态，请执行以下操作：

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

function Curtain(props){

return(
    <div className="curtain__div">
        <ul className="menu__items">
            <li className={props.show ? 'show-class' : 'hide-class'}>abc</li>
            <li>def</li>
            <li>ghi</li>
            <li>klm</li>
        </ul>
    </div>
);

（第二个选项在技术上更好，因为如果您非常快速地重复单击按钮，它可以避免竞争条件）
最简单的选项就是根据您的状态有条件地返回组件：

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

要反转当前状态，请执行以下操作：

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

function Curtain(props){

return(
    <div className="curtain__div">
        <ul className="menu__items">
            <li className={props.show ? 'show-class' : 'hide-class'}>abc</li>
            <li>def</li>
            <li>ghi</li>
            <li>klm</li>
        </ul>
    </div>
);

（第二个选项在技术上更好，因为如果您非常快速地重复单击按钮，它可以避免比赛条件）
首先，当前您只将状态设置为“显示”组件，而从不将其“隐藏”：

不要总是将状态设置为
true
，而是从其当前值切换状态：

onClick={() => setShow(!show)}

其次，您将使用该状态值有条件地呈现元素。因此，不要总是渲染它：

<Curtain/>



您将根据以下状态有条件地渲染它：

{ show ? <Curtain/> : null }

{show？：null}
首先，当前您只将状态设置为“显示”组件，而从不将其“隐藏”：

不要总是将状态设置为
true
，而是从其当前值切换状态：

onClick={() => setShow(!show)}

其次，您将使用该状态值有条件地呈现元素。因此，不要总是渲染它：

<Curtain/>



您将根据以下状态有条件地渲染它：

{ show ? <Curtain/> : null }

{show？：null}
您只需将句柄函数更改为toggle，而不是总是将其设置为true，这样就可以了

function NavBar(){

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


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

}


export default NavBar;

函数导航栏（）{
const[show，setShow]=useState（false）；
返回(

setShow（！show）}>


);
}
导出默认导航栏；
您只需将句柄函数更改为toggle，而不是总是将其设置为true，这样就可以了

function NavBar(){

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


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

}


export default NavBar;

函数导航栏（）{
const[show，setShow]=useState（false）；
返回(

setShow（！show）}>


);
}
导出默认导航栏；
您需要将演出状态作为道具传递给窗帘

然后可以使用classname或其他东西有条件地显示/隐藏

此外，在setShow中，通过在值的前面加上一个！来传递可能为true或false的值！。在那里你传递的是真是假

function NavBar(){

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


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

函数导航栏（）{
const[show，setShow]=useState（false）；
返回(

setShow（！show）}>


);

然后在幕墙构件中，可以执行以下操作：

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

function Curtain(props){

return(
    <div className="curtain__div">
        <ul className="menu__items">
            <li className={props.show ? 'show-class' : 'hide-class'}>abc</li>
            <li>def</li>
            <li>ghi</li>
            <li>klm</li>
        </ul>
    </div>
);

功能幕（道具）{
返回(

abc
def
ghi
荷航

);
您需要将演出状态作为道具传递给窗帘

然后可以使用classname或其他东西有条件地显示/隐藏

另外，在setShow中，通过在前缀中加一个！来传递可能为true或false的值。在这里传递的是true或false

function NavBar(){

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


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

函数导航栏（）{
const[show，setShow]=useState（false）；
返回(

setShow（！show）}>


);

然后在幕墙构件中，可以执行以下操作：

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

function Curtain(props){

return(
    <div className="curtain__div">
        <ul className="menu__items">
            <li className={props.show ? 'show-class' : 'hide-class'}>abc</li>
            <li>def</li>
            <li>ghi</li>
            <li>klm</li>
        </ul>
    </div>
);

功能幕（道具）{
返回(

abc
def
ghi
荷航

);