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 小时前
angular生态及学习路线
前端·学习·angular.js
无尽夏_6 小时前
HTML5(前端基础)
前端·html·html5
Jagger_6 小时前
敏捷开发流程-精简版
前端·后端
FIN66686 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing6 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1276 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿6 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66686 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy6 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴7 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python