Javascript 在React中有条件地设置活动类

我是一个新的反应者，当然，我也面临着一些问题，我正试图做到这一点。当这些组件中的任何一个打开时，我想设置一个活动类。我已经试过了，但不起作用。因此，我想在这些div处于活动状态时为它们添加背景色。我将非常感谢你的帮助。谢谢

 const App = () => {

 const[isStyleOpen, setIsStyleOpen]=React.useState(false)
 const[isRectOpen, setIsRectOpen]=React.useState(true)
 const[isHairOpen, setIsHairOpen]=React.useState(false)

    function openHair(){
    setIsHairOpen(true)
    }
    function closeHair(){
      setIsHairOpen(false)
    }

     
    function openRect(){
     setIsRectOpen(true)
    }
    function closeRect(){
      setIsRectOpen(false)
     }
 
    

    function openStyle(){
     setIsStyleOpen(true)
    }
    function closeStyle(){
     setIsStyleOpen(false)
    }


     return (
      
          <div className='menu'>         
            <div className='menu__iconsRight ' >
            <img   onClick={() => setIsRectOpen(!isRectOpen)} 
              src="./images/icons/win.png"/>
              {isRectOpen ? <Rect />: null}
          </div>
       
           
            <div className={`?active: 'menu__iconsRight' `}    >
            <img    onClick={() => setIsStyleOpen((isStyleOpen) => 
             !isStyleOpen)} 
              src="https://winaero.com/blog/wp-content/uploads/2017/07/Co-win-- 
              icon.png"/>
               {isStyleOpen ? <Style  closeStyle={closeStyle}  />: null}
            </div>
       
              <div className='menu__iconsRight '>
                <img    onClick={() => setIsHairOpen(!isHairOpen)} 
              src="./images/icons/at.png"/>
               {isHairOpen ? <Hair closeHair={closeHair}  />: null}   
               </div>
              
            )
           }
         export default App

const-App=（）=>{
常量[isStyleOpen，setIsStyleOpen]=React.useState（false）
const[isRectOpen，setIsRectOpen]=React.useState（true）
const[isHairOpen，setIsHairOpen]=React.useState（false）
函数openHair（）{
setIsHairOpen（真）
}
函数closeHair（）{
setIsHairOpen（错误）
}
函数openRect（）{
setIsRectOpen（真）
}
函数closeRect（）{
setIsRectOpen（错误）
}
函数openStyle（）{
setIsStyleOpen（真）
}
函数closeStyle（）{
setIsStyleOpen（错误）
}
返回(
{isRectOpen？：null}
{isStyleOpen？：null}
{isHairOpen？：null}
)
}
导出默认应用程序

您可以简单地执行以下操作：

...
<div className={"menu__iconsRight " + ((isRectOpen) ? "active": "")}>
...

。。。
...

---

这就是您想要的吗？

要处理更复杂的情况，您可以使用：

<div className={classnames("menu__iconsRight", {
  "active": isRectOpen
})}>