react中將html字符串渲染到頁面的實現(xiàn)方式
react將html字符串渲染到頁面
在做react項目時，有時候需要將后臺傳過來的html的字符串變成真正的結(jié)構(gòu)渲染到頁面，如果直接插入的話頁面顯示的就是這段字符串，而不會進行轉(zhuǎn)義，可以用以下方法插入，便可以html的形式展現(xiàn)：
<div dangerouslySetInnerHTML={{__html: "<p>這里是自己要渲染的數(shù)據(jù)內(nèi)容</p>"}} />實際用法：
<div className="detailImgWrap" dangerouslySetInnerHTML={{ __html:goodsDetailData.skuList[0].storeGoodsProfile}}></div>react如何正常渲染一段HTML字符串
解決React項目后臺接口返回HTML 文本時無法解析渲染成正常的html問題：
dangerouslySetInnerHTMl 屬性
很多時候我們做一個項目接口會返回一段 HTML 字符串文本，然后我們把它解析渲染成正常的html，這是在項目中常見不能再常見的情況了，可是在 react 里邊就有一個小小的插曲，在這里分享給同學(xué)們；
由于react 項目中是 JSX 語法，JSX 防注入攻擊使得大括號里的html代碼全部變成字符串進行渲染，本人就遇到了這樣的問題，（還是渲染這段代碼字符串文本，并沒有解析）
解決
原理：
1.dangerouslySetInnerHTMl 是React標(biāo)簽的一個屬性，類似于angular的ng-bind；
2.有2個{{}}，第一{}代表jsx語法開始，第二個是代表dangerouslySetInnerHTML接收的是一個對象鍵值對;
3.既可以插入DOM，又可以插入字符串；
<div dangerouslySetInnerHTML = {{__html:返回的html代碼}} ></div>當(dāng)然我們可以封裝成一個函數(shù)用于模板渲染的時候進行調(diào)用：
function showhtml(htmlString){
? ? var html = {__html:htmlString};
? ? return ? <div dangerouslySetInnerHTML={html}></div> ;
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個重要的核心概念Fiber Node,這次主要的研究對象是： 如何從使用者/學(xué)習(xí) 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下2024-04-04
這篇文章主要介紹react實現(xiàn)路由攔截的,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
React中完整實例講解Recoil狀態(tài)管理庫的使用
這篇文章主要介紹了React中Recoil狀態(tài)管理庫的使用，Recoil的產(chǎn)生源于Facebook內(nèi)部一個可視化數(shù)據(jù)分析相關(guān)的應(yīng)用，在使用React的實現(xiàn)的過程中，因為現(xiàn)有狀態(tài)管理工具不能很好的滿足應(yīng)用的需求，因此催生出了Recoil，對Recoil感興趣可以參考下文2023-05-05
這篇文章主要介紹了React引入css的三種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
React模擬實現(xiàn)Vue的keepAlive功能
Vue中,keep-alive組件可以緩存組件狀態(tài),在路由切換時重新掛載,實現(xiàn)這一功能在React中并不簡單,但我們可以借助一個第三方庫——react-activation 來模擬Vue的keep-alive功能,需要的朋友可以參考下2024-10-10
memo可以自己決定是否更新，但它是一個函數(shù)組件而非一個類，本文主要介紹了React.memo引起的bug，具有一定的參考價值，感興趣的可以了解一下2022-03-03
react-pdf實現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁面展示
這篇文章主要介紹了react-pdf實現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁面展示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
ReactNative短信驗證碼倒計時控件的實現(xiàn)代碼
本篇文章主要介紹了ReactNative短信驗證碼倒計時控件的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
關(guān)于React動態(tài)修改元素樣式的三種方式
這篇文章主要介紹了關(guān)于React動態(tài)修改元素樣式的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
useReducer?createContext代替Redux原理示例解析
這篇文章主要為大家介紹了useReducer?createContext代替Redux原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11