如何在YAML中添加换行？React渲染YAML内容换行失效问题

你的YAML写法是对的，|确实能保留文本中的换行。问题出在React默认会把文本里的换行符（\n）当成空格处理，不会自动渲染成换行效果。以下是两种可行的解决方法：

方法1：用CSS样式实现换行（推荐） #

给渲染content的元素添加white-space: pre-line样式，这个属性会保留文本中的换行符，同时自动合并多余的空格，非常适合正常段落的展示：

内联样式写法 #

// 假设解析后的YAML数据存在data变量中
<div style={{ whiteSpace: 'pre-line' }}>{data.content}</div>

类名样式写法 #

先在CSS中定义类：

.content-paragraph {
  white-space: pre-line;
}

然后在React组件中使用：

<div className="content-paragraph">{data.content}</div>

方法2：手动将换行符转为<br>标签 #

如果需要更精细的换行控制，可以把YAML文本中的换行符替换成React能识别的<br>元素：

安全的拆分渲染方式 #

{data.content.split('\n').map((line, idx) => (
  <React.Fragment key={idx}>
    {line}
    <br />
  </React.Fragment>
))}

这种方式不需要使用危险的HTML解析，避免XSS风险。

注意：YAML中直接写<br>为什么没用？ #

你在YAML里写的<br>会被当成普通字符串，React不会自动将其解析为HTML标签。如果一定要用这种方式，需要使用dangerouslySetInnerHTML，但要注意仅在内容完全可信的场景下使用：

<div dangerouslySetInnerHTML={{ __html: data.content.replace(/\n/g, '<br />') }} />

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