reactjs - 使用 react.js 在 switch case 中返回多个值

Question

我正在使用 switch case 根据 case 值呈现文本。除了文字，我还想添加一个图标。因此，对于特定情况，会有一个图标，旁边会有一个适当的文本。

为了实现这一点，我在 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);
}

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

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

标签： reactjsjsx

Answer 1

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

不，执行字符串连接。React 元素是一个对象，而不是字符串。对象的默认字符串表示[object Object]就是您获得该输出的原因。

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

要么使用片段，要么将两个元素放在另一个元素中：

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

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