使用react.js在切换情况下返回多个值

Question

我正在使用开关用例以根据用例值呈现文本。除了文本，我还想添加一个图标。因此，在特定情况下，会有一个图标，旁边有一个适当的文本。

要实现这一点，我在案例条件的return语句中添加了图标和文本。

     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);
}

使用上述逻辑，我得到

代替显示图标，它显示[object，object]。我可以不使用'+'号来连接两个元素吗？如果是这样，我如何一次返回两个元素？

Answer 1

  

我不能使用'+'来连接两个元素吗？

否，它执行字符串连接。 React元素是一个对象，而不是字符串。对象的默认字符串表示形式为[object Object]，这就是为什么要获得该输出的原因。

  

如果是这样，我如何一次返回两个元素？

使用 fragment 或将两个元素都放在另一个元素中：

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

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