使用三元嵌套的 If Else 语句 React 渲染 className答案

【问题标题】：Render className with ternary nested If Els statement React使用三元嵌套的 If Else 语句 React 渲染 className
【发布时间】：2021-10-12 13:31:30
【问题描述】：

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

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

 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" 这个类将在所有按钮中。

【问题讨论】：

为什么条件一样？
我建议您将此逻辑移动到函数中并使用if...else 而不是嵌套的三元条件。以后你会感谢自己的。
这个类将在所有按钮中。这个类怎么不在提供的代码中的所有按钮中？

标签： javascript reactjs

【解决方案1】：

你可以使用类似的东西：

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

等等……

 className={classes.join(' ')}

【讨论】：

【解决方案2】：

我建议将这个逻辑移到一个函数中。类似的东西

const getClassName = () => {
  let className
  if (btnName === 'PLAYER_PLAY') {
    // applicable logic here for className here
  } else {
    // applicable logic here for className here
  }
  return className
}

【讨论】：

感谢将其移至函数