ant design 如何將後臺傳送的帶特殊字元的資料轉義為html解析
阿新 • • 發佈：2018-12-18
目錄
問題場景
ant design 是基於React實現的元件庫，會將\n這樣的特殊字元轉成空格，但是我們想讓資料顯示在前端介面上，怎麼做呢？
解決
首先，將data中的\n替換為<br >
因為ant design 直接將特殊字元轉換成空格了，我們應將特殊字元自己處理一下
data = json.data.replace(/\n/g,'<br />');其次，用dangerouslySetInnerHTML屬性轉義字元
經過上一步我們只是把data的特殊字元轉成html能識別的字元，但是ant design是基於react的，所以直接顯示的話不會轉義，此時用dangerouslySetInnerHTML屬性轉義字元（注意：定義在元件屬性上）
<p dangerouslySetInnerHTML={{ __html: logData}} />拓展
|
< |
< |
小於號 |
|
> |
> |
大於號 |
|
& |
& |
和 |
|
' |
' |
單引號 |
|
" |
" |
雙引號 |
1、替換一個字元
taskName=taskName.replace(/<p>/,"");或者 taskName=taskName.replace("<p>","");
2、替換所有字元
taskName=taskName.replace(/<p>/g,"");
g代表所有
3、替換帶/或者\的特殊字元</p>
此時需要用到轉義字元\/
taskName=taskName.replace(/<\/p>/g,"");