使用 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]"

我已经探索了otheranswers 中详述的.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>
  }
})