React三元运算符返回JSX和字符串时显示[object Object]如何解决

你遇到的[object Object] Subscribed渲染异常，本质是因为<CheckOutlined />这类JSX标签最终会被编译为React元素对象，使用+拼接对象和字符串时，JS会自动调用对象的toString()方法，对象转字符串的默认结果就是[object Object]，自然无法正常渲染图标。

不要用+做JSX元素和文本的拼接，把同状态下需要展示的图标、文本用统一的父容器包裹（可以用无额外DOM节点的React Fragment，也可以用span等行内标签），直接在容器内并列写图标和文本即可，嵌套三元运算符完全可以实现需求。

正确代码示例：

{
  success !== undefined
    ? success
      ? <><CheckOutlined /> Subscribed</>
      : <><CloseOutlined /> Error!</>
    : 'Subscribe'
}

补充说明 #

• 示例中<></>是React Fragment的简写语法，只会渲染内部的内容，不会额外生成冗余的DOM节点；如果需要给图标加文本间距、自定义样式，也可以换成<span>标签做包裹。
• JSX语法支持直接在容器内并列放置多个元素、文本节点，不需要手动做字符串拼接。

内容的提问来源于stack exchange，提问作者Ivana Murray