如何使用三元操作符返回值和JSX元素?

Question

当有人点击发送电子邮件的按钮时，我试图同时做两件事。下面的代码将按钮的文本更改为"发送…";并添加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>

Answer 1

你可以把它们放在一个父元素中，然后再渲染。

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