如何在if下写jsx if?

Question

我想在我的jsx中这样写，但是我不知道怎么写。

if(condition){
if(condition){
}else{
}
}

我怎么能在jsx写这样的?谢谢你的帮助。

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

Answer 1

可以在每个if语句中添加jsx片段<></>

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

Answer 2

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

类似的东西应该可以工作。你不应该再做一个{，它只是一种逃离JSX的方法，所以一个就足够了。现在你可以把两个内三元运算符连起来。它不是很干净，但应该可以用。