關(guān)于React渲染html字符串的處理

背景:有些時(shí)候我們用Textarea輸入內(nèi)容并提交后,想在回顯的時(shí)候按照當(dāng)時(shí)輸入的格式回顯(換行骤视,空格等等)

但是愕提,react 項(xiàng)目是 JSX 語法锐墙,JSX 防注入攻擊使得大括號里的html代碼全部變成字符串進(jìn)行渲染,無法按照你想象的樣子回顯

網(wǎng)上解決方法:

<div dangerouslySetInnerHTML = {{__html:接口返回的值(包括html代碼)}} ></div>

經(jīng)過測試這樣子也不行,還是要在整個(gè)div外邊加上<pre></pre>標(biāo)簽的铜涉,如下:

<pre><div dangerouslySetInnerHTML = {{__html:接口返回的值(包括html代碼)}} ></div></pre>

解釋:
(1)dangerouslySetInnerHTMl 是React標(biāo)簽的一個(gè)屬性
(2)第一{}代表jsx語法開始智玻,第二個(gè)是代表dangerouslySetInnerHTML接收的是一個(gè)對象鍵值對
(3)可以插入DOM,也可以插入字符串

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末芙代,一起剝皮案震驚了整個(gè)濱河市吊奢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌纹烹,老刑警劉巖页滚,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異铺呵,居然都是意外死亡裹驰,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進(jìn)店門片挂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來幻林,“玉大人,你說我怎么就攤上這事音念』龋” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵闷愤,是天一觀的道長整葡。 經(jīng)常有香客問我,道長讥脐,這世上最難降的妖魔是什么遭居? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮攘烛,結(jié)果婚禮上魏滚,老公的妹妹穿的比我還像新娘。我一直安慰自己坟漱,他們只是感情好鼠次,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著芋齿,像睡著了一般腥寇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上觅捆,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天赦役,我揣著相機(jī)與錄音,去河邊找鬼栅炒。 笑死掂摔,一個(gè)胖子當(dāng)著我的面吹牛术羔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播乙漓,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼级历,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了叭披?” 一聲冷哼從身側(cè)響起寥殖,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎涩蜘,沒想到半個(gè)月后嚼贡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡同诫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年粤策,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片剩辟。...
    茶點(diǎn)故事閱讀 40,117評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡掐场,死狀恐怖往扔,靈堂內(nèi)的尸體忽然破棺而出贩猎,到底是詐尸還是另有隱情,我是刑警寧澤萍膛,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布吭服,位于F島的核電站,受9級特大地震影響蝗罗,放射性物質(zhì)發(fā)生泄漏艇棕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一串塑、第九天 我趴在偏房一處隱蔽的房頂上張望沼琉。 院中可真熱鬧,春花似錦桩匪、人聲如沸打瘪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽闺骚。三九已至,卻和暖如春妆档,著一層夾襖步出監(jiān)牢的瞬間僻爽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工贾惦, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留胸梆,地道東北人敦捧。 一個(gè)月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像碰镜,于是被迫代替她去往敵國和親绞惦。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 以下內(nèi)容是我在學(xué)習(xí)和研究React時(shí)洋措,對React的特性济蝉、重點(diǎn)和注意事項(xiàng)的提取、精練和總結(jié)菠发,可以做為React特性...
    科研者閱讀 8,234評論 2 21
  • GUIDS 第一章 為什么使用React王滤? React 一個(gè)提供了用戶接口的JavaScript庫。 誕生于Fac...
    jplyue閱讀 3,538評論 1 11
  • 自己最近的項(xiàng)目是基于react的滓鸠,于是讀了一遍react的文檔雁乡,做了一些記錄(除了REFERENCE部分還沒開始讀...
    潘逸飛閱讀 3,390評論 1 10
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記糜俗,個(gè)人覺得該教程講解深入淺出踱稍,比目前大...
    leonaxiong閱讀 2,839評論 1 18
  • 原文地址:Learning React.js is easier than you think原文作者:Samer...
    sunshine小小倩閱讀 4,229評論 3 41