JSX中根据条件控制复选框显示状态的问题求助

你的条件判断逻辑出错了，导致只有isOpsAdmin生效，其他角色无法触发复选框隐藏。

错误原因 #

原代码的条件结合运算符优先级问题，实际逻辑偏离了需求：

• 逻辑运算符中&&优先级高于||，原条件!isOpsAdmin || !isOmiAdmin || !isRider || !isRunner会被解析为：只要不是isOpsAdmin，或者不是isOmiAdmin，或者不是isRider，或者（不是isRunner且渲染复选框）。
• 比如登录isOmiAdmin时，!isOpsAdmin为true，整个条件就会成立，所以复选框依然显示，不符合“任一角色登录就隐藏”的要求。

正确写法 #

你需要实现的逻辑是：四个角色中任意一个为true时不渲染复选框，仅当所有角色都为false时才渲染。有两种等价写法可选：

写法1：直接判断无任何角色权限

<TableRow>
  {!isOpsAdmin && !isOmiAdmin && !isRider && !isRunner && (
    <TableCell padding="checkbox">
      <Checkbox
        onChange={() => console.log("checked all")}
      />
    </TableCell>
  )}
</TableRow>

写法2：取反“任一角色权限”（逻辑更直观）

<TableRow>
  {!(isOpsAdmin || isOmiAdmin || isRider || isRunner) && (
    <TableCell padding="checkbox">
      <Checkbox
        onChange={() => console.log("checked all")}
      />
    </TableCell>
  )}
</TableRow>

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