如何将函数放入 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>

</>)

函数不工作，但没有错误，第二个 class {styles.buttonize} 工作正常！我错过了什么？

Answer 1

comma operator (,) 计算它的每个操作数（从左到右）和 returns 最后一个操作数的值。在你的情况下 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>

如何将函数放入 React className 字段？

How to put function in React className field?

styles

classname

reactjs