React 如何正常渲染一段HTML字符串


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,又可以插入字符串;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM