使用 react.js 在 switch case 中返回多个值答案

【问题标题】：Return multiple values in switch case using react.js使用 react.js 在 switch case 中返回多个值
【发布时间】：2019-04-16 20:23:17
【问题描述】：

我正在使用 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]。我可以不使用“+”号连接两个元素吗？如果是这样，我如何在一次返回中返回两个元素？

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

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

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

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

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

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

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

【讨论】：

我相信你也可以像这样用括号换行：return ( {intl.formatMessage(messages.processIncomplete)});
@Alex：不，那是无效的 JavaScript。
怎么样？在 React 中，render 函数中的 return 语句用括号包裹，如果 switch 块在 Render 中，它只能返回一个 JSX 元素。
是的，我尝试将行包含在 () 中，但它不起作用。
现在想想，它只能返回一个父元素。您需要使用 span、div 或片段来包装它。我的错。