通过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]"

我已经探索了其他答案中.reduce()详细介绍的解决方案，但它似乎也不是很正确。有人有提示吗？

Answer 1

这是一个可以通过reduce解决的好方法：

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