React中的HTML轉義寫法

Charlie_Jade 發布于2019-08-21 17:55 / 3204人閱讀

摘要：所以，如果中含有轉義后的實體字符，比如，則最后中不會正確顯示，因為自動把中的特殊字符轉義了。

在JSX中輸出固定內容

直接使用UTF-8字符

版權 ?

使用HTML轉義字符

版權 ©

或者十進制的轉義字符

版權 ©

動態內容的轉義

但是如果在外面加一層大括號的話，react為了防止xss會將轉義后的字符實體再次轉義

React 會將所有要顯示到 DOM 的字符串轉義，防止 XSS。所以，如果 JSX 中含有轉義后的實體字符，比如 ?（?），則最后 DOM 中不會正確顯示，因為 React 自動把 ? 中的特殊字符轉義了。

{"版權 ©"}

錯誤輸出

版權 ©

正確寫法：

直接使用UTF-8字符仍然可以正確輸出

{"版權 ?"}

安全的做法是使用對應的Unicode碼

{"版權 u00a9"}

使用fromCharCode

{"版權 " + String.fromCharCode(169)}

使用數組組裝

{["版權 ", ©]}

使用dangerouslySetInnerHTML，可以避免React轉義字符

參考

JSX Gotchas

深入react技術棧

GPU云服務器云服務器 js中的ajax寫法 linux中的轉義符 html寫法 html 鏈接寫法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90215.html

React入門學習

摘要：對象的屬性與組件的屬性一一對應，但是有一個例外，就是屬性，它表示組件的所有子節點。此外，還提供兩種特殊狀態的處理函數。組件中樣式的寫法這種方式錯誤使用這種方式，第一重大括號表示這是語法，第二重大括號表示樣式對象。如何渲染到容器直接上代碼： //第一個參數是構造的組件，第二個參數是使用組件的容器 ReactDom.render( , document.getEleme...

laznrbfe 2019-08-19 17:34 評論0 收藏0
react開發教程（－）初識

摘要：定義一個組件可以在其他組件中調用這個組件調用組件劉宇組件插入內容在上面的案例中可以看到吧寫到當中，這種寫法稱為。 React初識 React是Facebook推出的一個javascript庫(用來創建用戶界面的Javascript庫)，所以他只是和用戶的界面打交道，你可以把它看成MVC中的V(視圖)這一層。組件 React的一切都是基于組件的。web世界的構成是基于各種HTML標簽的...

Allen 2019-08-21 15:36 評論0 收藏0
render方法括號的作用

摘要：并且只會執行表達式輸出與上面的表達式不同的是表達式和都會執行這就是括號的作用。所以可以得出結論方法中結果添加括號的目的是為了更符號原生編碼習慣的的思維并且在一些例如中編寫時標簽自動對齊方式更好看。在學習過程中,發現一個小問題,因為小很少人關注討論過這個問題, react構建component的render方法中return后面為什么要加括號?下面嘗試給出些解釋。首先(),(1,2)這...

AaronYuan 2019-08-21 18:00 評論0 收藏0
使用React 應當注意的幾個地方

摘要：都會造成錯誤，注意一定一定嚴格的用，所以我建議直接復制我的。因為用的話他會轉義代碼，寫不寫其實一個樣。不可避免的，構建肯定是要用到的。這個時候一般用的是在外面保存然后里面調用第二個坑更隱蔽。目標人群獻給熟悉基礎的React語法的剛接觸React的同學~ 如果你已經寫過半年以上的React那也不用看了，畢竟我水平并不高 Whats React React 是一個不存在的網絡公司Fac...

高璐 2019-08-19 17:11 評論0 收藏0