例如:
后台數據為 "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 值( 一個對象而不是字符串 )應該被用來表明凈化后的數據。