为什么React无法渲染存储在state中的HTML标签内容

问题原因 #

• React 默认会对所有 JSX 中{}插值内的字符串内容做 HTML 转义处理，这是官方内置的安全防护机制，目的是防范跨站脚本攻击（XSS）。如果 React 直接把用户可控制的字符串当作 HTML 解析渲染，攻击者可以注入携带<script>等恶意标签的内容，盗取用户敏感信息、执行非法操作，会引发严重的安全漏洞。
• 你的代码中将<b>Hey</b>作为字符串存储在 state 中，通过{html}插值渲染时，React 会自动把标签的尖括号转译为对应的字符实体（<转译为<、>转译为>），因此浏览器只会将其识别为普通文本展示，不会解析为生效的 HTML 标签。

可选解决方案 #

如果你确认要渲染的 HTML 内容完全安全可控，可以使用 React 提供的dangerouslySetInnerHTML属性实现需求，修改后的代码参考如下：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [html, setHtml] = useState("<b>Hey</b>");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div dangerouslySetInnerHTML={{__html: html}}></div>
    </div>
  );
}

注意：使用dangerouslySetInnerHTML前必须确保渲染的 HTML 来源完全可信，严禁直接渲染用户提交的未经过滤的内容，避免触发 XSS 安全风险。

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