在react中渲染html

目标：能够渲染HTML字符串格式的文章内容

分析说明：

参考：React 的 dangerouslySetInnerHTML

参考：MDN innerHTML 安全问题

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案，用来在 JSX 中渲染 HTML 格式的字符串内容

通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于跨站脚本（XSS）的攻击

HTML 5 中规定：不执行由 innerHTML 插入的

' 转化为： '

' // 比如，将 '' 转化为：'' const clean = DOMPurify.sanitize(dirty)

步骤：

1. 安装 dompurify 和 类型声明文件：yarn add dompurify yarn add -D @types/dompurify
2. 导入 dompurify 包
3. 通过 dangerouslySetInnerHTML 来展示消毒后的 HTML 内容

核心代码：

import DOMPurify from 'dompurify'

<div
  className="content-html dg-html"
  dangerouslySetInnerHTML={{
    __html: DOMPurify.sanitize(content)
  }}
/>