[英]Set active class conditionally in React
我是 React 的新手,当然,我面临着问题,我想要完成的事情就是这个。 当打开这些组件中的任何一个时,我想设置一个活动的 class。 我已经尝试过一些东西,但它不起作用。 所以我想在这些 div 处于活动状态时为它们添加背景颜色className='menu__iconsRight '
。 我将不胜感激。 谢谢
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
您可以简单地执行以下操作:
...
<div className={"menu__iconsRight " + ((isRectOpen) ? "active": "")}>
...
这是你要找的吗?
要处理更复杂的情况,您可以使用classnames :
<div className={classnames("menu__iconsRight", {
"active": isRectOpen
})}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.