dangerouslySetInnerHTMl 屬性
很多時候我們做一個項目接口會返回一段 HTML 字符串文本,然后我們把它解析渲染成正常的html,這是在項目中常見不能再常見的情況了,可是在 react 里邊就有一個小小的插曲,在這里分享給同學們;
由於react 項目中是 JSX 語法,JSX 防注入攻擊使得大括號里的html代碼全部變成字符串進行渲染,本人就遇到了這樣的問題,(還是渲染這段代碼字符串文本,並沒有解析)
解決:
<div dangerouslySetInnerHTML = {{__html:返回的html代碼片段}} ></div>
原理:
1.dangerouslySetInnerHTMl 是React標簽的一個屬性,類似於angular的ng-bind;
2.有2個{{}},第一{}代表jsx語法開始,第二個是代表dangerouslySetInnerHTML接收的是一個對象鍵值對;
3.既可以插入DOM,又可以插入字符串;