React中如何显示API传入字符串的换行？已试\n和br标签无效

嘿，我来帮你搞定这个换行显示的难题！根据你能修改后端字符串的情况，给你几个实用的方案：

方案一：用CSS快速解决（无需修改后端） #

这是最简单的方法，只需要给你的.definition类添加一个CSS样式，让浏览器识别字符串里的\n为换行：

.definition {
  white-space: pre-wrap;
}

你的React代码完全不用改，还是原来的：

<div className="definition"> {this.state.definition} </div>

这个样式会保留字符串里的换行和空格，同时自动换行适应容器宽度，非常省心。

方案二：后端改用<br />标签，前端安全渲染 #

如果你更倾向于用HTML换行标签，那可以把后端返回的字符串改成"Name <br /> Last Name"，然后用以下两种方式渲染：

方式1：使用dangerouslySetInnerHTML（仅当内容可信时用） #

这个方法直接让React解析HTML内容，但要注意如果字符串来自不可信的用户输入，会有XSS风险：

<div className="definition" dangerouslySetInnerHTML={{ __html: this.state.definition }} />

方式2：分割字符串后安全渲染（推荐） #

这种方式不用危险的HTML解析，更安全：

<div className="definition">
  {this.state.definition.split('<br />').map((part, index) => (
    <React.Fragment key={index}>
      {part}
      {/* 最后一个部分后面不加<br /> */}
      {index !== this.state.definition.split('<br />').length - 1 && <br />}
    </React.Fragment>
  ))}
</div>

方案三：前端手动将\n转为<br /> #

如果后端还是返回带\n的字符串，你可以在前端处理后渲染：

<div className="definition">
  {this.state.definition.split('\n').map((part, index) => (
    <React.Fragment key={index}>
      {part}
      {index !== this.state.definition.split('\n').length - 1 && <br />}
    </React.Fragment>
  ))}
</div>

个人最推荐方案一，代码改动最少，效果也稳定。如果有特殊需求再考虑其他方案~

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