React.js如何不替换字符直接识别API返回字符串中的换行、回车、Tab符

浏览器默认会合并所有连续的空白字符（包括换行、回车、制表符、空格）为单个空格，这是直接渲染时格式丢失的核心原因，以下方案都不需要修改API返回的原始数据，也无需遍历替换内容，仅修改渲染层逻辑即可生效。

方案1：使用CSS white-space 属性（最推荐） #

直接给Item组件添加对应的CSS属性即可：

/* 对应Item组件的样式类 */
.item-content {
  /* 保留换行、制表符等空白格式，同时支持内容超出容器时自动换行 */
  white-space: pre-wrap;
}

如果用行内样式写法更简单：

<Item style={{ whiteSpace: 'pre-wrap' }}>{item.comment}</Item>

如果不需要自动换行，要求完全严格保留原始格式的换行位置，可以把属性值换成white-space: pre。

方案2：使用<pre>标签包裹内容 #

HTML原生的<pre>标签默认就会保留所有空白字符格式，直接包裹渲染内容即可：

<Item>
  <pre>{item.comment}</pre>
</Item>

如果需要和页面其他文字样式统一，需要重置<pre>的默认样式：

pre {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

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