react將html字符串渲染到頁面

在做react項目時，有時候需要將后臺傳過來的html的字符串變成真正的結構渲染到頁面，如果直接插入的話頁面顯示的就是這段字符串，而不會進行轉義，可以用以下方法插入，便可以html的形式展現：

<div dangerouslySetInnerHTML={{__html: "<p>這里是自己要渲染的數據內容</p>"}} />

實際用法：

<div className="detailImgWrap" dangerouslySetInnerHTML={{ __html:goodsDetailData.skuList[0].storeGoodsProfile}}></div>

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

解決React項目后臺接口返回HTML 文本時無法解析渲染成正常的html問題：

dangerouslySetInnerHTMl 屬性

很多時候我們做一個項目接口會返回一段 HTML 字符串文本，然后我們把它解析渲染成正常的html，這是在項目中常見不能再常見的情況了，可是在 react 里邊就有一個小小的插曲，在這里分享給同學們；

由于react 項目中是 JSX 語法，JSX 防注入攻擊使得大括號里的html代碼全部變成字符串進行渲染，本人就遇到了這樣的問題，（還是渲染這段代碼字符串文本，并沒有解析）

解決

原理：

1.dangerouslySetInnerHTMl 是React標簽的一個屬性，類似于angular的ng-bind；

2.有2個{{}}，第一{}代表jsx語法開始，第二個是代表dangerouslySetInnerHTML接收的是一個對象鍵值對;

3.既可以插入DOM，又可以插入字符串；

<div dangerouslySetInnerHTML = {{__html:返回的html代碼}} ></div>

當然我們可以封裝成一個函數用于模板渲染的時候進行調用：

function showhtml(htmlString){
? ? var html = {__html:htmlString};
? ? return ? <div dangerouslySetInnerHTML={html}></div> ;
}

總結