你能有条件地应用三个不同的类到一个React组件吗?

Question

我看到的每个答案都使用三元运算符，它只允许两个条件if/else。但是我有下面这个组件，我需要三个独立的类有条件地应用。如果selected为false，我希望它不应用任何类，如果它被选中，roleTable为false，应用'toggle-user'，如果它被选中，roleTable为true，应用'toggle-role'。

return (
<>
<tr
className={(selected && !roleTable) ? styles[`toggle-${selection}`] : ""}
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;

Answer 1

条件操作符可以嵌套。考虑事先将类名创建为一个独立的语句，以提高可读性。

const trClassName = !selected
? ''
: roleTable
? 'toggle-role'
: 'toggle-user';
return (
<>
<tr
className={trClassName}
onClick={toggle}
>

如果'selection'是'role'或'user'，则不需要嵌套条件;如果selected为真，则无条件使用toggle-${selection}

className={selected ? `toggle-${selection}` : ''}

或者如果你想使用的类名在styles对象

中

className={selected ? styles[`toggle-${selection}`] : ''}

Answer 2

可以有3个不同的类。可以使用三元操作符和className库的组合。例如:

import classnames from 'classnames';
return (
<tr
className={classnames({
[styles[`toggle-${selection}`]]: selected && !roleTable,
[styles['toggle-user']]: selected && roleTable,
})}
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>
);