如何为React组件条件性应用三种不同的类？

要实现三种条件下的类名切换，你可以嵌套三元运算符来处理多分支逻辑，刚好适配你只能用if/else双条件三元的限制：

className={selected ? (roleTable ? styles['toggle-role'] : styles['toggle-user']) : ""}

逻辑拆解 #

• 第一层判断selected：如果为false，直接返回空字符串（不添加类）
• 当selected为true时，进入第二层判断roleTable：
  • roleTable为true → 应用styles['toggle-role']类
  • roleTable为false → 应用styles['toggle-user']类

修改后的完整组件代码 #

return (
  <>
    <tr
      className={selected ? (roleTable ? styles['toggle-role'] : styles['toggle-user']) : ""}
      onClick={toggle}
    >
      <td className={cols ? styles['person-row'] : styles["user-row"]}>
        <div className={cols ? styles['person-col'] : ""}>
          {cols ? props.user.name : props.user}
        </div>
        {cols ? (
          <>
            <div className={styles["person-col"]}>{props.user.email}</div>
            <div className={styles["person-col"]}>{props.user.role}</div>
          </>
        ) : null}
      </td>
    </tr>
  </>
);
};

export default User;

注：原代码中使用了styles[toggle-${selection}]，如果你的selection变量本身就是user或role，也可以写成styles[toggle-${roleTable ? 'role' : 'user'}]，但上述写法更直观匹配你的需求描述。

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