dangerouslySetInnerHTML,React中显示html代码

dangerouslySetInnerHTML ,危险的设置内部HTML。"永远不要相信用户的输入"。

当用户输入或者获取到的数据是一段HTML代码的时候,dangerouslySetInnerHTML就可以把这一段代码变成HTML,然后插入到某个地方,类似JS中的innerHTML

1、怎么用

javascript 复制代码
const [description,setDescription] = useState('');

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

2、为什么要这么用

使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。开发者在执行"不安全"的操作的时候应该清楚地知道他们自己的意图。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设

计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。警示程序员,不要随意的使用该属性。

这么做的意义在于,{__html:...} 背后的目的是表明它会被当成 "type/taint" 类型处理。 这种包裹对象,可以通过方法调用返回净化后的数据,随后这种标记过的数据可以。注意__html是两个_被传递给 dangerouslySetInnerHTML。

这个功能主要被用来与 DOM 字符串操作类库一起使用,所以提供的 HTML 必须要格式清晰(例如:传递 XML 校验)。

相关推荐
岁月宁静4 分钟前
一、《从零手撸 Agent》 我用 10 行代码跑通了第一次大模型调用(顺便踩了 4 个坑)
前端·python·agent
计算机魔术师22 分钟前
Fable 5.1 来了,智能体任务成本降 45%——Anthropic 这次为何降价这么狠
前端
Csvn23 分钟前
现代 CSS 新特性深度:container query、:has()、@scope 与 subgrid
前端
梦想的颜色25 分钟前
【AI实战】React‑Native + AI 移动端 APP 完整实战全流程|云端 / 本地大模型、Agent 集成、安装配置、避坑指南
react.js·大模型·app·agent·reactnative·expo·ai 应用开发
计算机魔术师28 分钟前
Anthropic 自己承认:模型越来越难管住了
前端
两只羊ovo37 分钟前
Agent 干活的底层地基:path 路径 + fs 文件系统,一次讲透
前端
一用书生37 分钟前
我给 ChatGPT、DeepSeek、Kimi 都加了一个「保存为笔记」按钮
前端·ai编程·vibecoding
咖啡无伴侣40 分钟前
1. 从零搭建企业级 Monorepo 工程化模板:初始化、应用创建与共享 TypeScript 配置
前端·前端框架
moonsims41 分钟前
再议AiBrainBox-V的前左右三目布局-满足多目SLAM算法;对比单下视VIO(低空、地面纹理丰富、飞行速度适中无人机 )&多目VIO
前端·人工智能·量子计算
AI编程实验室42 分钟前
Agent Handoff 自动跟踪 Skill:安装、事件映射与证据分级
前端·ai编程