如何在 React className 字段中添加函数？

Question

我有这样的东西：

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} 工作正常！ 我错过了什么？

Answer 1

comma operator (,) 计算其每个操作数（从左到右）并返回最后一个操作数的值。在您的情况下，classHandler(valueA) 被评估，但 className 将等于 styles.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>