JS渲染不定长数组时如何在每个元素后自动添加<br />实现换行？

你之前的写法报错是因为直接用+运算符拼接字符串和JSX元素<br />，二者类型不匹配，属于语法错误，无法被JSX解析器识别。以下是3种可行的实现方案：

方案1：用Fragment包裹文本和换行标签（最通用，无安全风险） #

这是最推荐的写法，不需要处理XSS风险，能严格实现文本后加<br />的需求：

import React from 'react'

const a = ['bla bla bla', 'bla, bla', 'bla']

// 渲染部分代码
{
  a.map((item, index) => (
    // 如需给列表项加唯一key，必须使用完整的React.Fragment标签，不能用<>简写
    <React.Fragment key={index}>
      {item}<br />
    </React.Fragment>
  ))
}

如果你的数组有唯一业务ID可以作为key，替换index为对应ID即可，渲染性能更好。

方案2：拼接HTML字符串后渲染（仅适用于纯文本安全场景） #

如果数组所有内容都是可控的纯文本，没有用户输入的不可信内容，可以用更简洁的写法：

const a = ['bla bla bla', 'bla, bla', 'bla']

<div dangerouslySetInnerHTML={{__html: a.join('<br />')}} />

⚠️ 注意：如果数组内容包含用户提交的不可信内容，不要使用该方案，会存在XSS注入漏洞。

方案3：用块级元素包裹每一项（语义化更好） #

如果每个数组项是独立的内容段，更推荐用块级元素包裹，利用块级元素默认换行的特性实现效果，不需要额外加<br />：

const a = ['bla bla bla', 'bla, bla', 'bla']

{
  a.map((item, index) => (
    <div key={index}>{item}</div>
    // 是段落内容的话也可以换成<p key={index}>{item}</p>
  ))
}

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