Reactjs 使用react.js在开关情况下返回多个值

我使用开关大小写根据大小写值渲染文本。除了文本，我还想添加一个图标。所以对于一个特殊的情况，会有一个图标，旁边会有一个合适的文本

为了实现这一点，我在case条件的返回语句中添加了图标和文本

     case 'DENIED':
       return <Square /> + intl.formatMessage(messages.processDenied);
     case 'CANCELLED':
       return <CloseIcon color='red' /> + intl.formatMessage(messages.processCancelled);
     case 'INCOMPLETE':
       return <HourglassIcon /> + intl.formatMessage(messages.processIncomplete);
     default:
        return intl.formatMessage(messages.processApproved);
}

案例“拒绝”：
return+intl.formatMessage（messages.processDenied）；
个案‘已取消’：
return+intl.formatMessage（messages.processCancelled）；
案例“不完整”：
return+intl.formatMessage（messages.processComplete）；
违约：
返回intl.formatMessage（messages.processApproved）；
}

当我使用上述逻辑时，我得到

它不显示图标，而是显示[对象，对象]。我可以不使用“+”符号连接两个元素吗？如果是，如何在一次返回中同时返回这两个元素

我可以不使用“+”符号连接两个元素吗

不，它执行字符串连接。React元素是对象，而不是字符串。对象的默认字符串表示形式是

[object object]

，这就是您获得该输出的原因

如果是，如何在一次返回中同时返回这两个元素

使用或将两个元素放入另一个元素中：

// fragment
return <><Square /> {intl.formatMessage(messages.processDenied)}</>;

// children of another element
return <span><Square /> {intl.formatMessage(messages.processDenied)}</span>;

//片段
返回{intl.formatMessage（messages.processDenied）}；
//另一元素的子元素
返回{intl.formatMessage（messages.processDenied）}；

我相信您也可以像这样用括号括起来：return（{intl.formatMessage（messages.processcomplete）}）@亚历克斯：不，那是无效的JavaScript。怎么会呢？render函数中的return语句在React中用括号括起来，如果switch块在render中，它只能返回一个JSX元素。是的，我尝试在（）中包装行，但它不起作用。现在我考虑一下，它只能返回一个父元素。您需要用span、div或fragment来包装它。我的错。