反应三元运算符 return jsx 和字符串 returns 一个对象

Question

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

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

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

[object Object] Subscribed

如果我不添加字符串，一切都很好，我可以看到 jsx。我怎样才能让他们都使用三元查看？

Answer 1

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

Answer 2

您正在连接字符串中的 JSX 元素，这就是它提供 [Object Object] 订阅的原因。还要用 React.Fragment 包裹图标和字符串。正确的方法是：

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

反应三元运算符 return jsx 和字符串 returns 一个对象

React ternary operator return jsx and string returns an Object

reactjs

antd

conditional-operator