React中API返回带HTML文本无法解析渲染问题求助

方案1：处理纯文本中的\n（安全优先） #

如果API返回的文本用\n分隔换行，不需要解析HTML标签，直接通过CSS属性就能实现换行，完全规避XSS风险：

<div style={{ whiteSpace: 'pre-line' }}>{props.text}</div>

pre-line会识别文本中的换行符并渲染成换行，同时自动合并连续空格，符合常规文本展示的需求。

方案2：解析HTML标签（需注意XSS风险） #

如果API返回的文本包含<br/>这类HTML标签，需要让React解析这些标签，可以使用dangerouslySetInnerHTML：

<div dangerouslySetInnerHTML={{ __html: props.text }} />

⚠️ 注意：这个属性命名带有"dangerously"，是因为如果props.text包含恶意脚本（比如来自未过滤的用户输入），会引发XSS攻击。如果内容不可信，一定要先做HTML清理处理，比如用dompurify库过滤后再传入：

import DOMPurify from 'dompurify';

// 清理内容后渲染
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(props.text) }} />

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