将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()解决方案，但似乎也不太正确。有没有人有什么技巧？

- Ben

---

你能将JSX转换为字符串，然后再进行连接吗？请查看react-dom-server renderToString。它可以返回组件生成的HTML。 - Chase DeAnda

但是它似乎也不能正常工作。问题出在哪里？React元素不是字符串，所以你肯定不能使用.join方法来连接它们。 - Felix Kling

是的，那就是问题的本质 :p - Ben

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>
  }
})

- Tal Avissar

---

从 hr 中删除 ' '。 - kind user

现在非常好，+1 - kind user

顺便说一句，这与此处提出的解决方案完全相同：https://dev59.com/9VsX5IYBdhLWcg3wRNnK#35840806 - Felix Kling

啊哈，我看到过这个，但是跳过了，因为我以为它和其他我看到的reduce解决方案一样。现在试试看，提前感谢！ - Ben

没错，就是这个技巧。我会给另一个点赞并将我的标记为重复。谢谢！ - Ben

三元运算符是不必要的，因为在没有显式的“initialValue”参数的情况下，“累加器将等于数组中的第一个值”。 - billkw