-2

我确实有一个小问题，我确实需要根据几个条件渲染一个类名。我有一个播放按钮、直播按钮和通用按钮。大多数类都是相同的，但我确实需要向播放按钮添加额外的类。

到目前为止，我的代码如下所示：

 className={`"Controller-Button player-btn icon" ${
          isSelected
            ? `${btnName === "PLAYER_LIVE" ? " live-button" : ""}`
            : `${btnName === "PLAYER_LIVE" ? " live-button" : ""}`
        }`}

现在我被困住了。我需要在 isSelectedd: 之前添加额外的条件： btnName === "PLAYER_PLAY" ? " play-button" : ""但我确实有问题如何正确地将它放在这样的渲染中。如果我要添加btnName === "PLAYER_LIVE" ? " live-button" : "play-button"这个类将在所有按钮中。

4

2 回答 2

2

你可以使用类似的东西：

const classes = ["Controller-Button", "player-btn", "icon"];
if(isSelected) {
  classes.push("live-button")
} else if(somethingCondition) {
   classes.push("someClass")
}

ETC...

 className={classes.join(' ')}
于 2021-10-12T13:42:34.567 回答
1

我建议将这个逻辑移到一个函数中。就像是

const getClassName = () => {
  let className
  if (btnName === 'PLAYER_PLAY') {
    // applicable logic here for className here
  } else {
    // applicable logic here for className here
  }
  return className
}
于 2021-10-12T13:42:53.473 回答