JSX中如何正确实现嵌套if/else条件判断的写法？

方案1：修复现有嵌套三元运算符写法 #

你原有代码的报错主要来自两个问题：

1. canDelete === 1 && 后多余嵌套了一层花括号，会被JS解析为对象字面量，不符合语法要求
2. Tooltip组件标签书写错误，多了冗余的</span>}字符

修复后代码如下：

{
  canDelete === 1 && (
    u.status === 'Active' ? (
      <Tooltip title="Deactivate" arrow>
        <IconButton 
          className={classes.deactivateButton}
        >  
          <HighlightOffIcon />
        </IconButton>
      </Tooltip>
    ) : (
      <Tooltip title="Activate" arrow>
        <IconButton 
          className={classes.activateButton}
        >  
          <CheckCircleOutlineIcon />
        </IconButton>
      </Tooltip>
    )
  )
}

方案2：抽离逻辑到渲染函数（更推荐，可读性更高） #

如果后续条件判断复杂度上升，把渲染逻辑抽成单独的函数可以避免JSX模板过于混乱：

// 组件内定义渲染逻辑函数
const renderActionButton = () => {
  if (canDelete !== 1) return null
  if (u.status === 'Active') {
    return (
      <Tooltip title="Deactivate" arrow>
        <IconButton 
          className={classes.deactivateButton}
        >  
          <HighlightOffIcon />
        </IconButton>
      </Tooltip>
    )
  } else {
    return (
      <Tooltip title="Activate" arrow>
        <IconButton 
          className={classes.activateButton}
        >  
          <CheckCircleOutlineIcon />
        </IconButton>
      </Tooltip>
    )
  }
}

// JSX模板中直接调用函数
{renderActionButton()}

核心语法规则说明 #

JSX的{}内只能放置JavaScript表达式，不能直接写if/else语句，所以实现条件渲染只有两种通用思路：

• 用三元运算符、&&/||这类逻辑运算符组合成表达式，直接写在{}内
• 把条件判断逻辑抽离到函数中，在{}内调用函数返回要渲染的元素

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