基于MERN栈的React博客：如何解析字符串渲染HTML内容？

要在React组件里直接渲染HTML字符串，你需要使用React提供的dangerouslySetInnerHTML属性，这是官方推荐的处理方式——你之前用DOMParser的方案无效，是因为它返回的是完整的HTML文档对象，React无法直接渲染这类对象。

基础实现代码 #

直接将HTML字符串通过dangerouslySetInnerHTML传入：

<div className='content' dangerouslySetInnerHTML={{ __html: post.description }} />

安全提醒 #

注意这个属性的命名带有「dangerously」，因为直接插入未过滤的HTML可能引发XSS攻击：

• 如果HTML内容是后台生成的可信内容，直接使用即可；
• 如果内容来自用户提交，必须先做XSS过滤，比如使用dompurify库对字符串净化后，再传入__html。

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