React中字符串变量传入HTML标签渲染时用什么特殊字符可实现换行？

问题根因 #

HTML默认会将连续空白字符（换行、空格、制表符等）合并为单个空格，所以你拼接的\n不会被识别为换行。

可行解决方案 #

方案1：使用CSS white-space属性（最推荐，修改成本最低）

给渲染文本的p标签添加white-space: pre-line样式即可，该属性会保留文本中的换行符，同时自动处理其他场景的文本折行：

<p 
  id="transition-modal-description"
  style={{ whiteSpace: 'pre-line' }}
>
  some fields are empty: &#10;
  { this.state.incompleteFields }
</p>

如果使用CSS模块化，也可以直接在对应的样式类中给该p标签加white-space: pre-line规则，无需写内联样式。

方案2：直接渲染数组 + 换行标签（符合React JSX声明式写法）

不用把数组join成带\n的字符串，直接保存原始数组，渲染时遍历数组给每一项加换行标签：
修改状态赋值逻辑：

// 不用join，直接存原始数组
incompleteFields = ["Name", "Gender", "Age"]
this.setState({incompleteFields: incompleteFields})

修改渲染逻辑：

<p 
  id="transition-modal-description"
>
  some fields are empty:<br/>
  { this.state.incompleteFields.map((field, index) => (
    <React.Fragment key={index}>
      {field}
      {/* 最后一项不加换行可加判断：index !== this.state.incompleteFields.length -1 && <br/> */}
      <br/>
    </React.Fragment>
  )) }
</p>

方案3：使用dangerouslySetInnerHTML（不推荐，仅作参考）

如果一定要用HTML换行标签拼接，可以用该属性渲染，但要注意如果incompleteFields的内容是用户可输入的，会有XSS注入风险：
修改状态赋值逻辑：

// 拼接<br/>作为换行符
incompleteFields = ["Name", "Gender", "Age"].join(`<br/>`)
this.setState({incompleteFields: incompleteFields})

修改渲染逻辑：

<p 
  id="transition-modal-description"
  dangerouslySetInnerHTML={{
    __html: `some fields are empty:<br/>${this.state.incompleteFields}`
  }}
>
</p>

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