react中將html字符串渲染到頁面的實(shí)現(xiàn)方式
react將html字符串渲染到頁面
在做react項(xiàng)目時(shí)，有時(shí)候需要將后臺(tái)傳過來的html的字符串變成真正的結(jié)構(gòu)渲染到頁面，如果直接插入的話頁面顯示的就是這段字符串，而不會(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 Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個(gè)重要的核心概念Fiber Node,這次主要的研究對(duì)象是： 如何從使用者/學(xué)習(xí) 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下2024-04-04
這篇文章主要介紹react實(shí)現(xiàn)路由攔截的,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
React中完整實(shí)例講解Recoil狀態(tài)管理庫的使用
這篇文章主要介紹了React中Recoil狀態(tài)管理庫的使用，Recoil的產(chǎn)生源于Facebook內(nèi)部一個(gè)可視化數(shù)據(jù)分析相關(guān)的應(yīng)用，在使用React的實(shí)現(xiàn)的過程中，因?yàn)楝F(xiàn)有狀態(tài)管理工具不能很好的滿足應(yīng)用的需求，因此催生出了Recoil，對(duì)Recoil感興趣可以參考下文2023-05-05
這篇文章主要介紹了React引入css的三種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
React模擬實(shí)現(xiàn)Vue的keepAlive功能
Vue中,keep-alive組件可以緩存組件狀態(tài),在路由切換時(shí)重新掛載,實(shí)現(xiàn)這一功能在React中并不簡單,但我們可以借助一個(gè)第三方庫——react-activation 來模擬Vue的keep-alive功能,需要的朋友可以參考下2024-10-10
memo可以自己決定是否更新，但它是一個(gè)函數(shù)組件而非一個(gè)類，本文主要介紹了React.memo引起的bug，具有一定的參考價(jià)值，感興趣的可以了解一下2022-03-03
react-pdf實(shí)現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁面展示
這篇文章主要介紹了react-pdf實(shí)現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁面展示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
ReactNative短信驗(yàn)證碼倒計(jì)時(shí)控件的實(shí)現(xiàn)代碼
本篇文章主要介紹了ReactNative短信驗(yàn)證碼倒計(jì)時(shí)控件的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式
這篇文章主要介紹了關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
useReducer?createContext代替Redux原理示例解析
這篇文章主要為大家介紹了useReducer?createContext代替Redux原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11