React JSX中如何用if/else条件渲染按状态切换激活/停用按钮

报错原因 #

• 核心语法错误：JSX内使用三元条件运算符时，你遗漏了条件判断后必须的?符号，正确的三元运算符语法为条件 ? 真值返回内容 : 假值返回内容，你写的u.status == '0' (少了?，导致JSX解析失败。
• 次要逻辑错误：else分支里的Tooltip提示文本还是写的"Deactivate"，和你要实现的激活按钮逻辑不符。

修复方案 #

直接补充缺失的?，同时修正错误的Tooltip提示文本即可，修复后的完整代码如下：

{u.status == '0' ? (
  <Tooltip title="Deactivate">
    <IconButton 
      aria-label="Deactivate"
      color="primary"
      size="small"
      className={classes.deactivateButton}
      onClick={() => {handleDeactivate(u.groupsid)}}
    >  
      <HighlightOffIcon />
    </IconButton>
  </Tooltip>
):(
  <Tooltip title="Activate">
    <IconButton 
      aria-label="Activate"
      color="primary"
      size="small"
      className={classes.ActivateButton}
      onClick={() => {handleActivate(u.groupsid)}}
    >  
      <HighlightOffIcon />
    </IconButton>
  </Tooltip>
)}

如果觉得三元运算符可读性不佳，也可以用&&逻辑运算符拆分写法：

{u.status == '0' && (
  <Tooltip title="Deactivate">
    <IconButton 
      aria-label="Deactivate"
      color="primary"
      size="small"
      className={classes.deactivateButton}
      onClick={() => {handleDeactivate(u.groupsid)}}
    >  
      <HighlightOffIcon />
    </IconButton>
  </Tooltip>
)}
{u.status != '0' && (
  <Tooltip title="Activate">
    <IconButton 
      aria-label="Activate"
      color="primary"
      size="small"
      className={classes.ActivateButton}
      onClick={() => {handleActivate(u.groupsid)}}
    >  
      <HighlightOffIcon />
    </IconButton>
  </Tooltip>
)}

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