在 React 的开发旅程中，你迟早会遇到需要直接操作 DOM 来渲染 HTML 字符串的情况。也许你正试图从后端 API 渲染一段富文本内容，或者需要集成第三方生成的 HTML 片段。你会发现，React 推荐的 JSX 语法并不是那么“灵活”——它会自动转义内容以防止攻击。这时候，dangerouslySetInnerHTML 这个属性就会出现在你的视野中。虽然它的名字看起来有点吓人（确实带有“危险”二字），但在正确的场景下合理使用它，是 React 开发者必须掌握的技能。
在这篇文章中，我们将深入探讨 dangerouslySetInnerHTML 属性的方方面面。我们将解释为什么 React 需要这样一个属性，它底层的实现原理是什么，以及最重要的是，如何在利用其强大功能的同时，确保我们的应用程序免受跨站脚本（XSS）攻击的威胁。我们将通过丰富的实际代码示例来演示其用法，并分享一些在实际生产环境中验证过的最佳实践。
为什么我们需要它？
React 对待 DOM 的态度是非常严谨的。在常规的 JSX 中，当你试图将一个包含 HTML 标签的字符串放入视图时，React 会默认将这些字符转义。例如，如果你想显示一个 INLINECODEa73b5ba9 标签，React 会将其渲染为纯文本 INLINECODE71d68066，而不是将其解析为 HTML 元素。这是 React 为了安全性而设计的默认行为，能够有效防止大部分的注入攻击。
然而，这种“保姆式”的保护并不总是我们想要的。想象一下，你正在构建一个博客系统，后端返回的文章内容是带有丰富格式的 HTML 字符串（包含 INLINECODEf017f552、INLINECODEacefebf8、INLINECODE8e89d269 等标签）。如果直接渲染，用户只会看到一堆乱码一样的 HTML 源码。为了解决这个问题，React 提供了 INLINECODEe5a2cde0，它是浏览器 DOM 中 INLINECODE9206bfba 属性的替代品。之所以在名字中加上 INLINECODEdc581fa0，是为了警示开发者：直接渲染 HTML 可能会导致安全漏洞，请务必确保内容来源是可信的。
基本语法与原理
让我们先从最基本的语法开始。不同于 Vue 等框架直接使用 INLINECODE4fecfe3d 指令，React 使用了一个稍微独特的对象结构。我们必须传递一个对象给这个属性，该对象包含一个键名为 INLINECODEf4240c7e 的属性，其值就是我们想要渲染的 HTML 字符串。
这是一个最简单的标准写法示例：
import React from ‘react‘;
const BasicExample = () => {
// 定义我们要渲染的原始 HTML
const htmlContent = ‘这是一段通过 dangerouslySetInnerHTML 渲染的蓝色文字。
‘;
return (
{/* 在 div 上使用 dangerouslySetInnerHTML 属性 */}
{/* 注意：我们传入了一个对象 { __html: ... } */}
);
};
export default BasicExample;
为什么 React 要设计成传递一个对象 { __html: ... } 而不是直接传递字符串？
这其实是 React 故意为之的设计。它强迫开发者在写代码时多思考一步。如果只是一个简单的字符串属性，我们可能会很容易地像传递 INLINECODE3120856a 或 INLINECODE259a9fb0 一样随意传递数据。通过要求一个特定的对象结构，React 在代码层面增加了这一操作的“仪式感”，时刻提醒开发者：嘿，你正在渲染原始 HTML，请务必小心！从实现角度看，这也有助于优化 React 的 diff 算法，使其更明确地知道如何处理内部内容的更新。
实战演练：不同场景下的应用
为了让你更全面地掌握这个属性，让我们通过几个具体的实战场景来演练。我们将涵盖类组件、函数组件，以及如何处理动态数据。
#### 场景一：在函数组件中渲染静态内容
这是最常见的用法，通常用于渲染 CMS 系统返回的富文本片段。
import React from ‘react‘;
const StaticContent = () => {
// 模拟从后端获取的富文本内容
const cmsData = `
产品介绍
这是一个功能强大的 React 组件库。
- 快速开发
- 高性能
- 易于维护
`;
return (
欢迎阅读
{/* 将后端返回的 HTML 字符串注入到 DOM 中 */}
{/* React 会解析这里的标签并应用样式 */}
);
};
export default StaticContent;
#### 场景二：在类组件中动态注入 HTML
虽然现在函数组件和 Hooks 是主流，但在维护旧项目时，你仍然会遇到类组件。其原理是完全相同的，只是状态管理的方式不同。下面的例子中，我们将在点击按钮时动态改变要渲染的 HTML。
import React, { Component } from ‘react‘;
// 这是一个标准的类组件写法
class DynamicHtmlComponent extends Component {
constructor(props) {
super(props);
// 初始化 state，用于存储当前的 HTML 内容
this.state = {
contentToRender: ‘点击下面的按钮来改变我的内容。
‘
};
}
// 定义一个方法来更新 HTML 内容
changeContent = () => {
const newContent = `
内容已更新！
现在显示的是一段带有内联样式的新 HTML。
`;
this.setState({ contentToRender: newContent });
};
render() {
return (
{/* 使用 dangerouslySetInnerHTML 渲染 state 中的 HTML */}
);
}
}
export default DynamicHtmlComponent;
在这个例子中，我们可以看到 INLINECODE0c91bec4 完美地配合了 React 的状态管理。当 INLINECODE2e658d58 更新时，React 会重新计算虚拟 DOM，并将新的 HTML 字符串高效地更新到页面中。
#### 场景三：处理 XSS 攻击的防御策略（安全实践）
既然我们一直在强调“安全”，那么如果不进行清理，dangerouslySetInnerHTML 到底有多危险？让我们看一个反面教材，然后演示如何修复它。
风险演示（请勿在生产环境中直接复制此代码）：
假设你的应用允许用户发布评论，如果有人提交了这样的代码：INLINECODEa9c804d7。如果不经处理直接渲染，用户的浏览器就会尝试加载图片，加载失败后触发 INLINECODE8b9ba6ec 事件，弹出一个警告框，甚至更糟糕——窃取用户的 Cookie。
解决方案：使用 DOMPurify 进行清理
在生产环境中，我们在渲染 HTML 之前，必须使用清理库来“消毒”HTML 字符串。我们强烈推荐使用 DOMPurify。它可以移除所有危险的脚本，只保留安全的 HTML 标签和属性。
首先，你需要安装它：npm install dompurify
然后，我们可以创建一个可复用的组件来封装这一逻辑：
import React from ‘react‘;
// 引入 DOMPurify 用于清理 HTML
import DOMPurify from ‘dompurify‘;
// 创建一个安全的 HTML 渲染组件
const SafeHtmlRenderer = ({ htmlContent }) => {
// 在渲染之前对 HTML 进行清理
// 这一步非常关键，它会移除 script 标签、onclick 事件等危险代码
const cleanHtml = DOMPurify.sanitize(htmlContent);
return (
);
};
const SecurityExample = () => {
// 这是一个包含潜在恶意代码的字符串
const userComment = `
用户评论区
{/* 我们将危险的原始 HTML 传递给我们的安全组件 */}
{/* SafeHtmlRenderer 会负责处理清理工作 */}
);
};
export default SecurityExample;
运行上述代码，你会发现 INLINECODE43729edc 标签和 INLINECODEb5e85f66 事件被完全移除了，只保留了安全的 INLINECODE5b16ff0b 和 INLINECODE6fed4933 标签。这才是处理用户输入内容的正确姿势。
样式处理与 CSS 作用域问题
使用 dangerouslySetInnerHTML 时，开发者经常遇到的另一个头痛问题是样式。
问题： 我们注入的 HTML 元素通常是全局的，它们不受 React 的 CSS Modules 或 Styled Components 等局部作用域样式的控制。这可能导致 CSS 污染，即你的全局样式意外改变了注入内容的样式，反之亦然。
建议方案：
- 使用 IFrame：如果样式隔离是强制性的（例如嵌入第三方插件），使用 INLINECODE1245bdea 配合 INLINECODE88f8cc28 属性可能是比
dangerouslySetInnerHTML更好的选择。 - 指定类名前缀：在生成 HTML 字符串时，给所有标签加上特定的类名前缀（如
.user-content p { ... }），并在 CSS 中针对这些前缀编写样式。
// 样式文件中
// styles.css
/* 这样可以避免影响组件外部的 p 标签 */
.raw-html-wrapper p {
line-height: 1.6;
color: #333;
}
// 组件中
import ‘./styles.css‘;
const StyledExample = () => {
return (
{/* 注入的 HTML 会受到 .raw-html-wrapper 样式的影响 */}
<div dangerouslySetInnerHTML={{ __html: '这里的样式受 wrapper 限制
‘ }} />
);
};
常见错误与故障排除
在开发过程中，我们收集了一些开发者最容易犯的错误，希望能帮你节省调试时间。
错误 1：直接传递字符串
// ❌ 错误：这会直接在屏幕上显示 HTML 源码，因为 React 不认识这个属性名
<div dangerouslySetInnerHTML="Hello
"} />
// ❌ 也会报错：React 期望一个对象，而不是字符串
<div dangerouslySetInnerHTML="Hello
" />
正确做法：
// ✅ 正确：必须是对象，且键名为 __html
<div dangerouslySetInnerHTML={{ __html: 'Hello
‘ }} />
错误 2：在浏览器端服务端渲染（SSR）不一致
如果你使用 Next.js 等框架，dangerouslySetInnerHTML 的内容在服务端生成的 HTML 结构必须与客户端完全一致。如果服务端渲染的 HTML 字符串包含空格，而客户端没有（或者反过来了），React 会发出“Did not expect server HTML to contain a…”的警告，并可能导致页面闪烁或性能下降。
解决方法： 确保注入的 HTML 字符串是经过标准化处理的（例如使用 .trim() 或一致的缩进逻辑）。
性能优化建议
使用 dangerouslySetInnerHTML 实际上是在告诉 React “不要管里面的内容了，我来负责”。这既是优点也是缺点。
- 减少 Diff 开销：对于巨大的 HTML 块（比如一篇很长的文章），使用
dangerouslySetInnerHTML比 React 通过数千个虚拟节点来逐步创建 DOM 要快得多。React 会把这个区域当作一个整体来处理，不会去深入比较内部每一个节点的变化。 - 更新效率：请注意，如果父组件重新渲染，且传入 INLINECODEfed54162 的字符串没有变化（引用相等），React 通常会跳过更新。但是如果每次都生成一个新的字符串，React 就会触发 INLINECODEed6e76f5 的重置，这在移动端可能会导致比较明显的性能开销。建议将 HTML 字符串的处理逻辑放在
useMemo中，以避免不必要的重复处理。
创建 React 应用程序的完整步骤
为了确保你可以跟着我们一起动手实践，以下是创建示例项目的标准步骤。
步骤 1: 创建项目
打开你的终端（命令行工具），使用以下命令创建一个新的 React 应用。我们将其命名为 my-dangerously-app。
npx create-react-app my-dangerously-app
这一步可能会花费几分钟时间，它会自动配置好 Webpack、Babel 以及其他必要的依赖。
步骤 2: 进入项目目录
安装完成后，请进入项目文件夹：
cd my-dangerously-app
步骤 3: 启动开发服务器
现在，让我们启动项目来看看初始效果：
npm start
执行完该命令后，浏览器会自动打开 INLINECODE3ab12dfe。现在，你可以打开代码编辑器（如 VS Code），找到 INLINECODE678cea90 文件，将我们在文中提供的任意示例代码粘贴进去，保存后浏览器页面就会自动刷新显示你的改动。
总结与关键要点
我们在文章中探索了 React 中 dangerouslySetInnerHTML 属性的用法、原理以及潜在风险。让我们回顾一下几个核心要点：
- 它是什么：它是 React 中替代浏览器原生
innerHTML的机制，用于直接向 DOM 节点插入 HTML 字符串。 - 为什么叫“危险”：直接渲染 HTML 会让应用暴露在 XSS 攻击之下，攻击者可以注入恶意脚本窃取用户数据。React 用这个名字来警示开发者。
- 如何使用：语法必须严格遵循
{{ __html: ‘...‘ }}的格式。 - 安全第一：永远不要渲染用户输入的未经验证的原始 HTML。在生产环境中，请务必配合使用
DOMPurify等库对内容进行清理。 - 性能考量：对于庞大的静态内容块，它可以提升渲染性能，但要注意避免不必要的重复字符串计算。
掌握 dangerouslySetInnerHTML 能够让你更灵活地处理富文本、第三方内容集成等复杂场景。只要保持敬畏之心，遵循安全最佳实践，它就是你工具箱中不可或缺的利器。现在，你可以尝试在项目中修改上面的代码，亲自体验一下它的强大功能了。
这篇文章真不错！
alert(‘恶意脚本试图窃取你的数据！‘);