如何在 React className 字段中放置函数？

编程问答 2022-06-01

问题描述

我有这样的事情：

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>
classnamereactjsreactjsreactjsreactjsstyles