react中dangerouslySetInnerHTML使用


例如:

  后台數據為 "aaaaaa<br/>bbbbbbbb "
  前端用dangerouslySetInnerHTML顯示可以有換行

在react中,通過富文本編輯器進行操作后的內容,會保留原有的標簽樣式,並不能正確展示。

在顯示時,將內容寫入__html對象中即可。具體如下:

<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />

如果是直接調用接口中的值,則是以上的寫法,如果是單純的顯示固定的內容,用如下的寫法:

<div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />

原理:

1.dangerouslySetInnerHTMl 是React標簽的一個屬性,類似於angular的ng-bind;

2.有2個{{}},第一{}代表jsx語法開始,第二個是代表dangerouslySetInnerHTML接收的是一個對象鍵值對;

3.既可以插入DOM,又可以插入字符串;

4.不合時宜的使用 innerHTML 可能會導致 cross-site scripting (XSS) 攻擊。 凈化用戶的輸入來顯示的時候,經常會出現錯誤,不合適的凈化也是導致網頁攻擊的原因之一。dangerouslySetInnerHTML 這個 prop 的命名是故意這么設計的,以此來警告,它的 prop 值( 一個對象而不是字符串 )應該被用來表明凈化后的數據。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM