react如何將字符串轉(zhuǎn)義成html語句
將字符串轉(zhuǎn)義成html語句
在使用reactjs庫的時(shí)候,會(huì)遇到將一段html的字符串,然后要將它插入頁面中以html的形式展現(xiàn),
然而直接插入的話頁面顯示的就是這段字符串,而不會(huì)進(jìn)行轉(zhuǎn)義,可以用一下方法插入,便可以html的形式展現(xiàn):
<div dangerouslySetInnerHTML={{__html: "<p>愛死費(fèi)崇政</p>"}} />
將帶標(biāo)簽的字符串轉(zhuǎn)義為html
使用
dangerouslySetInnerHTML={{ __html: htmlString}}
范例
return ( ? ? ? <div>{props.record.contents.map(value => ? ? ? ? ( ? ? ? ? ? <div className={styles.expendBlock}> ? ? ? ? ? ? <p dangerouslySetInnerHTML={{ __html: value.content }} ?/> ? ? ? ? ? </div> ? ? ? ? ) ? ? ? )} ? ? ? </div> ? ? )
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
React類組件中super()和super(props)的區(qū)別詳解
這篇文章給大家詳細(xì)介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01antd之RangePicker設(shè)置默認(rèn)值方式
這篇文章主要介紹了antd之RangePicker設(shè)置默認(rèn)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12react ant Design手動(dòng)設(shè)置表單的值操作
這篇文章主要介紹了react ant Design手動(dòng)設(shè)置表單的值操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10詳解React??App.js?文件的結(jié)構(gòu)和作用
在React應(yīng)用中,App.js文件通常是項(xiàng)目的根組件文件,它負(fù)責(zé)組織和渲染其他組件,是應(yīng)用的核心部分,本文將詳細(xì)介紹App.js文件的結(jié)構(gòu)、作用和最佳實(shí)踐,感興趣的朋友跟隨小編一起看看吧2024-08-08通過實(shí)例學(xué)習(xí)React中事件節(jié)流防抖
這篇文章主要介紹了通過實(shí)例學(xué)習(xí)React中事件節(jié)流防抖,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06