如何使用三元运算符返回一个值和一个 JSX 元素？答案

【问题标题】：How do I return a value and a JSX element using the ternary operator?如何使用三元运算符返回一个值和一个 JSX 元素？
【发布时间】：2021-07-25 10:57:01
【问题描述】：

当有人单击按钮发送电子邮件时，我试图同时做两件事。下面的代码将按钮的文本更改为“Sending...”，并添加了 JSX 元素 <CircularProgress/>

<Button   
    className={submitButton}
    type="submit"
    disabled={emailStatus === "loading"}
    >        
{emailStatus === "loading" ? ("Sending..." ): "Send Email"}
{emailStatus === "loading" && (<CircularProgress size={24}/>)}
 </Button>

如您所见，我使用三元运算符检查了两次电子邮件状态。

怎样才能全部合二为一，可能是这样，但是不行：

<Button   
    className={submitButton}
    type="submit"
    disabled={emailStatus === "loading"}
    >        
{emailStatus === "loading" ? ("Sending..." , <CircularProgress size={24}/> ): "Send Email"}
 </Button>

【问题讨论】：

标签： reactjs material-ui jsx

【解决方案1】：

您可以将它们放在一个父元素中，然后渲染它。

<>
 Sending ...
 <CircularProgress size={24}/>
</>

【讨论】：

非常感谢！正是我想要的:)