react如何將字符串轉(zhuǎn)義成html語(yǔ)句
更新時(shí)間：2022年12月02日 09:50:00 作者：愛(ài)死費(fèi)崇政
這篇文章主要介紹了react如何將字符串轉(zhuǎn)義成html語(yǔ)句問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
將字符串轉(zhuǎn)義成html語(yǔ)句
在使用reactjs庫(kù)的時(shí)候，會(huì)遇到將一段html的字符串，然后要將它插入頁(yè)面中以html的形式展現(xiàn)，
然而直接插入的話頁(yè)面顯示的就是這段字符串，而不會(huì)進(jìn)行轉(zhuǎn)義，可以用一下方法插入，便可以html的形式展現(xiàn)：
<div dangerouslySetInnerHTML={{__html: "<p>愛(ài)死費(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)文章
unity中的ui元素是有嚴(yán)格的父子關(guān)系的,子物體的位置是根據(jù)父物體的變化而變化的,而子物體和父物體聯(lián)系的橋梁就是Anchor,本文重點(diǎn)介紹Unity?RectTransform的相關(guān)知識(shí),感興趣的朋友一起看看吧2024-01-01
React類組件中super()和super(props)的區(qū)別詳解
這篇文章給大家詳細(xì)介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
antd之RangePicker設(shè)置默認(rèn)值方式
這篇文章主要介紹了antd之RangePicker設(shè)置默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
React使用JSX來(lái)替代常規(guī)的JavaScript。JSX是一個(gè)看起來(lái)很像 XML的JavaScript語(yǔ)法擴(kuò)展。我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：JSX執(zhí)行更快，因?yàn)樗诰幾g為JavaScript代碼后進(jìn)行了優(yōu)化。它是類型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。使用JSX編寫(xiě)模板更加簡(jiǎn)單快速2022-12-12
這篇文章主要介紹了詳解react阻止無(wú)效重渲染的多種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
react ant Design手動(dòng)設(shè)置表單的值操作
這篇文章主要介紹了react ant Design手動(dòng)設(shè)置表單的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了談?wù)凴eact中的Render Props模式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
詳解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
通過(guò)實(shí)例學(xué)習(xí)React中事件節(jié)流防抖
這篇文章主要介紹了通過(guò)實(shí)例學(xué)習(xí)React中事件節(jié)流防抖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
React?Native性能優(yōu)化紅寶書(shū)方案詳解
React?Native?是Facebook在React.js?Conf2015推出的開(kāi)源框架,使用React和應(yīng)用平臺(tái)的原生功能來(lái)構(gòu)建Android和iOS應(yīng)用,這篇文章主要介紹了React?Native性能優(yōu)化紅寶書(shū),需要的朋友可以參考下2024-06-06