如何使用三元运算符同时返回文本值与JSX元素？

你之前的写法错误原因是JavaScript逗号运算符的规则：逗号分隔的多个表达式会依次执行，但最终仅返回最后一个表达式的结果，因此仅会渲染进度条组件，丢失"Sending..."文本。

只需要将加载状态下的文本和组件用React片段（短语法<></>）包裹为一个整体返回即可，无需额外生成冗余DOM节点，修改后的代码如下：

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

如果需要调整文本和进度条的对齐方式、间距，可将片段替换为带样式的容器元素，示例：

<Button   
    className={submitButton}
    type="submit"
    disabled={emailStatus === "loading"}
>        
{emailStatus === "loading" ? (
  <span style={{ display: "inline-flex", alignItems: "center", gap: "8px" }}>
    Sending...
    <CircularProgress size={24}/>
  </span>
) : "Send Email"}
</Button>

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