映射返回中的 React 渲染数组

Posted 2023-02-22

【中文标题】映射返回中的 React 渲染数组

【英文标题】：React Render Array in Mapped Return

【发布时间】：2014-10-29 17:56:38

【问题描述】：

我有一个反应组件正在呈现一些结果。我遇到的问题是 result.participants。这是一个数组，因此 map 渲染两个名称时没有任何间距，我发现很难插入这些空格。

result.participants 是一个字符串数组。

如果长度为 >1，我如何插入空格或一些逻辑以放入逗号和空格？

render: function()
  return (
  <ul>
    
      this.state.pads.map(function(result)
        return [
        <a href=result.pageUrl>result.title</a>,
        <li key=result.participants>Participants: result.participants </li>,
        <li key=result.summary>Summary: result.summary</li>,
        <li key=result.lastEdit>Last Edited: new Date(result.lastEdit).toDateString() </li>,
        <p></p>
        ];
      )
  </ul>
)

【问题讨论】：

According to html standard，你不会认为<p> 和<a> 直接在<ul> 中。

【参考方案1】：

如果您不关心将每个参与者包装在 <span> 中，您可以简单地使用内置的 Array.prototype.join 方法：

<li key=result.participants>Participants: result.participants.join(', ') </li>,

【参考方案2】：

就像评论者提到的那样，您不应该将裸露的<a> 和<p> 标签直接放入<ul>。但这不是重点，这个问题是关于 React 中的数组处理。

您应该能够像这样使用嵌套在 JSX 中的控制流结构：

  result.participants.map(function(participant, idx) 
    if (idx == result.participants.length - 1) 
      return (
        <span>participant, </span>
      );
     else 
      return participant;
    
  )

【讨论】：

您也可以选择function(participant, idx, array) if (idx === array.length) ...。我更喜欢它，因为您可以提取该函数并在多个上下文中使用它而无需更改任何内容。