React三元运算符使用问题解决及Sonar不接受该写法的原因说明

触发校验不通过的常见原因 #

Sonar作为静态代码检查工具，对三元表达式的可读性、类型一致性有明确的规则约束，常见触发规则不通过的场景如下：

• 三元两个分支的返回值类型不统一：例如一个分支返回React元素，另一个返回字符串、数字等原生类型，不符合类型一致性校验要求
• 存在嵌套三元表达式：Sonar默认禁止多层嵌套的三元逻辑，认为会大幅降低代码可维护性
• 其中一个分支返回null或undefined：Sonar会判定这种场景下三元属于冗余写法，应该用更简洁的短路逻辑替代
• 三元返回的JSX列表元素未添加唯一key属性：会触发Sonar关联的JSX规范校验规则

对应解决方法 #

• 单分支返回空的场景，直接替换为短路与写法
  原错误写法：

  {isActive ? <span>已激活</span> : null}
  

  修改后写法：

  {isActive && <span>已激活</span>}
  

• 两个分支返回类型不统一的场景，统一返回类型即可
  原错误写法：

  {isLogin ? <UserCard /> : '请先登录'}
  

  修改后写法：

  {isLogin ? <UserCard /> : <span>请先登录</span>}
  

• 嵌套三元的场景，拆分逻辑降低复杂度
  可以把分支逻辑抽为映射对象：

  const statusRenderMap = {
    1: <span>待审核</span>,
    2: <span>审核通过</span>,
    3: <span>审核驳回</span>
  }
  // 渲染时直接调用
  {statusRenderMap[status]}
  

  逻辑更复杂的场景可以抽为独立渲染函数：

  const renderStatus = (status) => {
    switch(status) {
      case 1: return <span>待审核</span>
      case 2: return <span>审核通过</span>
      case 3: return <span>审核驳回</span>
      default: return <span>未知状态</span>
    }
  }
  

• 确有必要保留原写法的场景，可以在代码行前加对应规则的忽略注释临时屏蔽校验，例如屏蔽嵌套三元校验的注释为// eslint-disable-next-line sonarjs/no-nested-conditional，该方法不建议频繁使用，会降低代码检查的有效性。

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