React中JSON字符串的\n换行符渲染到div后失效如何解决

HTML默认的文本渲染规则会将字符串中的\n换行符识别为普通空白字符，和空格、制表符做合并处理，不会直接渲染为页面上的换行；而浏览器控制台是纯文本输出环境，会正常识别\n的换行语义，因此会出现控制台打印正常、页面渲染不换行的差异。

方案1：CSS属性控制（优先推荐） #

给渲染描述文本的标签添加white-space: pre-wrap样式即可，无需修改JS渲染逻辑，代码改动最小。
修改对应样式代码：

.Description p {
  /* 保留文本中的换行、空白符，同时支持内容超宽时自动折行 */
  white-space: pre-wrap;
}

原有JSX代码不需要做任何调整，直接渲染metadata.description就能正常显示所有换行效果，连续\n\n生成的空行也会正常展示。

方案2：拆分字符串插入换行标签 #

如果需要对每行内容做自定义交互、单独控制样式，可以把字符串按\n拆分成数组，在每段内容后插入<br />标签实现换行。
修改对应JSX代码：

// 注意文件顶部要引入React
import React from 'react';

// 组件内渲染部分修改为
<p>
  {metadata.description.split('\n').map((lineText, index, arr) => (
    <React.Fragment key={index}>
      {lineText}
      {/* 最后一行不需要额外加换行标签 */}
      {index !== arr.length - 1 && <br />}
    </React.Fragment>
  ))}
</p>

不要为了省事直接用dangerouslySetInnerHTML把\n全局替换为<br />渲染，除非你能完全保证description字段的内容来源可信，否则会存在XSS注入安全风险。

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