React中使用嵌套三元判断多条件动态渲染按钮className的问题

实现方案 #

你出现错误的核心原因是把播放按钮、直播按钮两个独立的类名判断逻辑嵌套进了同一个三元表达式的else分支，导致所有非直播按钮都会被强制添加play-button。这两类专属类的判断应该独立拆分，互不影响即可。

方案1：数组拼接（更易维护，推荐） #

把所有类名放到数组里单独判断添加，逻辑清晰，后续新增类名也方便扩展：

// 先定义通用基础类
const btnClasses = ["Controller-Button", "player-btn", "icon"]
// 单独判断直播按钮专属类
if (btnName === "PLAYER_LIVE") btnClasses.push("live-button")
// 单独判断播放按钮专属类
if (btnName === "PLAYER_PLAY") btnClasses.push("play-button")
// 如果你需要isSelected选中状态加额外类，再加对应判断即可，比如：
// if (isSelected) btnClasses.push("selected-button")

// 最终拼接成字符串传给className
className={btnClasses.join(" ")}

方案2：模板字符串直接拼接 #

如果不想拆分逻辑，直接在原模板字符串里新增独立的判断即可，不要和原有逻辑嵌套：

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

注意：你原有代码的模板字符串开头多写了一个多余的双引号，会导致渲染出的类名带非法字符，记得删除。
另外你原有代码里isSelected的两个分支逻辑完全一致，都是判断添加live-button，属于冗余代码，如果没有选中状态的专属类需要加，可以直接删掉isSelected的判断，如果你需要选中状态加额外类，单独加一段${isSelected ? "对应类名" : ""}即可。

内容的提问来源于stack exchange，提问作者shivetay