React中如何用<br/>分隔数组元素实现无末尾换行的多行显示

如果你有数组["One", "Two", "Three"]，想把它渲染成用<br/>分隔的多行内容（类似普通文本里my_array.join("\n")的换行效果），直接用my_array.join(<br/>)肯定不行——因为<br/>是React元素，本质是对象，join会把它转成[object Object]，最终得到One[object Object]Two[object Object]Three这种怪异结果，而且就算能成功，还容易出现末尾多余的<br/>。

可以用下面的方案解决：

my_array.map((item, index) => index ? <><br/>{item}</> : <>{item}</>)

原理说明 #

• 用map遍历数组，借助索引判断元素位置
• 第一个元素（index === 0）直接渲染，不加<br/>
• 从第二个元素开始，先渲染<br/>再渲染当前元素
• 既实现了元素间的换行分隔，又不会在末尾多出多余的<br/>

内容的提问来源于stack exchange，提问作者Terminologist