时间戳

首页 > 解决方案 > 如何使用三元运算符返回一个值和一个 JSX 元素？

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

问题描述

当有人单击按钮发送电子邮件时，我正在尝试同时做两件事。下面的代码将按钮的文本更改为“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>

标签： reactjsmaterial-uijsx

解决方案

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

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

推荐阅读