如何通过使用map和join来渲染React组件

使用嵌套数组将“，”保留在外面。

  <div>
      {this.props.data.map((element, index) => index == this.props.data.length - 1 ? <span key={index}>{element}</span> : [<span key={index}>{element}</span>, ", "])}
  </div>

通过将数据保存到数组并修改最后一个元素而不是始终检查其最后一个元素来对其进行优化。

  let processedData = this.props.data.map((element, index) => [<span key={index}>{element}</span>, ", "])
  processedData [this.props.data.length - 1].pop()
  <div>
      {processedData}
  </div>

接受的答案实际上返回一个数组数组，因为prev每次都会是一个数组。React足够聪明，可以完成这项工作，但是将来很容易引起问题，例如在为每个映射结果提供键时会破坏Reacts差异算法。

这项新React.Fragment功能使我们能够以一种易于理解的方式执行此操作，而不会出现潜在的问题。

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map((t, index) => 
            <React.Fragment key={index}>
              <span> {t}</span> ,
            </React.Fragment>
          )
      </div>
  }
}

通过React.Fragment我们可以简单地将分隔符放置在,返回的HTML之外，React不会抱怨。