加入JSX与JSX

Question

我遇到了这样的情况:我有几个标签，中间有分隔箭头--有点像面包屑。

最后一个标签后面没有箭头。

对于.join()来说，这似乎是一种完美的情况，例如：

[1,2,3,4].join('->');  // "1->2->3->4"

但是，标签是JSX，连接分隔符也是JSX。

由于.join()需要一个字符串分隔符并将数组元素转换为字符串，因此它的结果如下：

[<div />, <div />].join(<hr />); // "[object Object][object Object][object Object]"

我已经在other answers中详细介绍了other解决方案，但它似乎也不太正确。有人有小费吗？

Answer 1

这里有一种很好的方法，您可以通过减少来解决这个问题：

React.createClass({
  render() {
     <div>
        this.props.data
        .map(t => <div/>)
        .reduce((accu, elem) => {
            return accu === null ? [elem] : [...accu, <hr />, elem]
        }, null)
     </div>
  }
})