react中將html字符串渲染到頁(yè)面的實(shí)現(xiàn)方式
react將html字符串渲染到頁(yè)面
在做react項(xiàng)目時(shí)，有時(shí)候需要將后臺(tái)傳過來的html的字符串變成真正的結(jié)構(gòu)渲染到頁(yè)面，如果直接插入的話頁(yè)面顯示的就是這段字符串，而不會(huì)進(jìn)行轉(zhuǎn)義，可以用以下方法插入，便可以html的形式展現(xiàn)：
<div dangerouslySetInnerHTML={{__html: "<p>這里是自己要渲染的數(shù)據(jù)內(nèi)容</p>"}} />實(shí)際用法：
<div className="detailImgWrap" dangerouslySetInnerHTML={{ __html:goodsDetailData.skuList[0].storeGoodsProfile}}></div>react如何正常渲染一段HTML字符串
解決React項(xiàng)目后臺(tái)接口返回HTML 文本時(shí)無法解析渲染成正常的html問題：
dangerouslySetInnerHTMl 屬性
很多時(shí)候我們做一個(gè)項(xiàng)目接口會(huì)返回一段 HTML 字符串文本，然后我們把它解析渲染成正常的html，這是在項(xiàng)目中常見不能再常見的情況了，可是在 react 里邊就有一個(gè)小小的插曲，在這里分享給同學(xué)們；
由于react 項(xiàng)目中是 JSX 語法，JSX 防注入攻擊使得大括號(hào)里的html代碼全部變成字符串進(jìn)行渲染，本人就遇到了這樣的問題，（還是渲染這段代碼字符串文本，并沒有解析）
解決
原理：
1.dangerouslySetInnerHTMl 是React標(biāo)簽的一個(gè)屬性，類似于angular的ng-bind；
2.有2個(gè){{}}，第一{}代表jsx語法開始，第二個(gè)是代表dangerouslySetInnerHTML接收的是一個(gè)對(duì)象鍵值對(duì);
3.既可以插入DOM，又可以插入字符串；
<div dangerouslySetInnerHTML = {{__html:返回的html代碼}} ></div>當(dāng)然我們可以封裝成一個(gè)函數(shù)用于模板渲染的時(shí)候進(jìn)行調(diào)用：
function showhtml(htmlString){
? ? var html = {__html:htmlString};
? ? return ? <div dangerouslySetInnerHTML={html}></div> ;
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用react-router4.0實(shí)現(xiàn)重定向和404功能的方法
本篇文章主要介紹了使用react-router4.0實(shí)現(xiàn)重定向和404功能的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了React?如何向url中添加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
react 實(shí)現(xiàn)圖片正在加載中 加載完成 加載失敗三個(gè)階段的原理解析
這篇文章主要介紹了react 實(shí)現(xiàn)圖片正在加載中 加載完成 加載失敗三個(gè)階段的,通過使用loading的圖片來占位，具體原理解析及實(shí)現(xiàn)代碼跟隨小編一起通過本文學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了詳解React服務(wù)端渲染從入門到精通，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
React Native預(yù)設(shè)占位placeholder的使用
本篇文章主要介紹了React Native預(yù)設(shè)占位placeholder的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
在?React?中如何從狀態(tài)數(shù)組中刪除一個(gè)元素
這篇文章主要介紹了在?React?中從狀態(tài)數(shù)組中刪除一個(gè)元素,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
引入代碼檢查工具stylelint實(shí)戰(zhàn)問題經(jīng)驗(yàn)總結(jié)分享
eslint的配置引入比較簡(jiǎn)單，網(wǎng)上有比較多的教程，而stylelint的教程大多語焉不詳。在這里，我會(huì)介紹一下我在引入stylelint所遇到的坑，以及解決方法2021-11-11
React中使用axios發(fā)送請(qǐng)求的幾種常用方法
本文主要介紹了React中使用axios發(fā)送請(qǐng)求的幾種常用方法，主要介紹了get和post請(qǐng)求，具有一定的參考價(jià)值，感興趣的可以了解一下2021-08-08
useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī)解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React使用context進(jìn)行跨級(jí)組件數(shù)據(jù)傳遞
這篇文章給大家介紹了React使用context進(jìn)行跨級(jí)組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧2024-01-01