React三元操作符返回jsx, string返回Object

Question

我需要检查表单是否已提交，如果成功，则显示一件事，如果不是另一件事。代码是

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

Undefined是表单第一次加载时的第一个状态。表单成功提交后返回的是

[object Object] Subscribed

如果我不添加字符串一切都很好，我可以看到jsx。我怎样才能用三进制来查看它们呢?

Answer 1

你在字符串中连接JSX元素，这就是为什么它给[Object Object]订阅。也用React.Fragment包裹图标和字符串。正确的做法是:

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

Answer 2

试试success ? (<CheckOutlined /> Subscribed) : (<CloseOutlined /> Error!)