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