javascript - 在映射返回中 react 渲染数组

Question

我有一个正在渲染一些结果的 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>
)
}

Answer 1

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

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