如何解决如何在 React className 字段中放置函数?
我有这样的事情:
const [valueA,setValA] = useState(1)
const [valueB,setValB] = useState(1)
const classHandler = (val) => {
if (val<2) {
return 'styles.redButt'
} else if (val===2) {
return 'styles.normalButt'
} else if (val===5) {
return 'styles.greenButt'
} else {
return 'styles.noneButt'
}
}
return (<>
<div className={classHandler(valueA),styles.buttonize}>
FirsT INFO {valueA}
</div>
<div className={classHandler(valueB),styles.buttonize}>
SECOND INFO {valueB}
</div>
</>)
功能不工作,但没有错误,第二类 {styles.buttonize} 工作正常! 我错过了什么?
解决方法
comma operator (,) 计算其每个操作数(从左到右)并返回最后一个操作数的值。在您的情况下 classHandler(valueA)
被评估,但 className
将等于 style.buttonize(最后一个操作数)。
如果您使用的是 css modules
,则此 return 'styles.redButt'
将不起作用,而是使用 return styles.redButt
const classHandler = (val) => {
if (val<2) {
return styles.redButt
} else if (val===2) {
return styles.normalButt
} else if (val===5) {
return styles.greenButt
} else {
return styles.noneButt
}
}
<div className={`${classHandler(valueA)} ${styles.buttonize}`}>
FIRST INFO {valueA}
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。