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 校验)。

相关推荐
研來如此28 分钟前
C++ 接口设计 && Doxygen 注释
前端·javascript·c++
野槐1 小时前
Electron开发
前端·javascript·electron
#做一个清醒的人1 小时前
【Electron】开发两年Electron项目评估报告
前端·electron
lizhongxuan7 小时前
Claude Code 防上下文爆炸:源码级深度解析
前端·后端
柳杉9 小时前
震惊!字符串还能这么玩!
前端·javascript
是上好佳佳佳呀9 小时前
【前端(五)】CSS 知识梳理:浮动与定位
前端·css
wefly201710 小时前
纯前端架构深度解析:jsontop.cn,JSON 格式化与全栈开发效率平台
java·前端·python·架构·正则表达式·json·php
我命由我1234511 小时前
React - 类组件 setState 的 2 种写法、LazyLoad、useState
前端·javascript·react.js·html·ecmascript·html5·js
聊聊MES那点事11 小时前
JavaScript图表控件AG Charts使用教程:使用AG Charts React实时更新柱状图
开发语言·javascript·react.js·图表控件
自由生长202412 小时前
IndexedDB的观察
前端