dangerouslySetInnerHTML

2023年12月06日

柏拉文

越努力，越幸运

一、认识

---

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于跨站脚本（XSS）的攻击。因此，你可以直接在 React 中设置 HTML，但当你想设置 dangerouslySetInnerHTML 时，需要向其传递包含 key 为 __html 的对象，以此来警示你。

二、语法

---

const htmlStr = "测试<a>高亮测试</a>测试"

<div dangerouslySetInnerHTML={{ __html: htmlStr }}></div>