Javascript 在映射返回中反应渲染数组

我有一个react组件正在呈现一些结果。我遇到的问题是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>
)
}

render:function（）{
返回(

{
this.state.pads.map（函数（结果）{
返回[
,
参与者：{result.participants}
，
摘要：{result.summary}
，
上次编辑：{new Date（result.lastEdit）.toDateString（）}
，

];
})}

)
}

就像前面提到的评论员一样，您不应该直接将

和
标签放入
中。但这与问题无关，这个问题是关于React中的数组处理的

您应该能够使用JSX中嵌套的控制流结构，如下所示：

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

{
result.participants.map（函数（参与者，idx）{
if（idx==result.participants.length-1）{
返回(
{参与者}，
);
}否则{
返回参与者；
}
})
}
如果您不想将每个参与者包装在一个
中，您可以简单地使用内置的
数组.prototype.join
方法：

参与者：{result.participants.join（'，'）}
，
，您不需要在
中直接包含
和
。您也可以选择执行
函数（参与者，idx，数组）{if（idx==array.length）…
。我更喜欢它，因为您可以提取该函数并在多个上下文中使用它，而无需更改任何内容。