在React中有条件地设置活动类 [英] Set active class conditionally in React
本文介绍了在React中有条件地设置活动类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是React的新手,当然,我遇到了问题,我想要实现的目标就是这个.这些组件中的任何一个打开时,我都想设置一个活动类.我已经尝试过一些东西,但是没有用.因此,我想在这些divs className ='menu__iconsRight'
处于活动状态时为其添加背景色.我会很感激的.谢谢
I am new to React and of course, I am facing problems, the thing I am trying to accomplish is this. When any of these Components is opened I want to set an active class. I have already tried something but it is not working. So I want to add a background color to these divs className='menu__iconsRight '
when they are active. I would appreciate the help. Thanks
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
推荐答案
您可以简单地执行以下操作:
You can simply do something like:
...
<div className={"menu__iconsRight " + ((isRectOpen) ? "active": "")}>
...
这是您要找的吗?
这篇关于在React中有条件地设置活动类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文