我確實有一個小問題，我確實需要根據幾個條件呈現 className。我有一個播放按鈕、實時按鈕和通用按鈕。大多數類都是相同的，但我確實需要向播放按鈕添加額外的類。
到目前為止，我的代碼如下所示：
className={`"Controller-Button player-btn icon" ${
isSelected
? `${btnName === "PLAYER_LIVE" ? " live-button" : ""}`
: `${btnName === "PLAYER_LIVE" ? " live-button" : ""}`
}`}
現在我被困住了。我需要在 isSelecetd 之前添加額外的條件：
btnName === "PLAYER_PLAY" ? " play-button" : ""但我確實有問題如何正確地將它放入這樣的渲染中。如果我將btnName === "PLAYER_LIVE" ? " live-button" : "play-button"在所有按鈕中添加此類。
uj5u.com熱心網友回復：
你可以這樣：
const classes = ["Controller-Button", "player-btn", "icon"];
if(isSelected) {
classes.push("live-button")
} else if(somethingCondition) {
classes.push("someClass")
}
等等...
className={classes.join(' ')}
uj5u.com熱心網友回復：
我建議將這個邏輯移到一個函式中。就像是
const getClassName = () => {
let className
if (btnName === 'PLAYER_PLAY') {
// applicable logic here for className here
} else {
// applicable logic here for className here
}
return className
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/310092.html
標籤：javascript 反应