學習如何在 React 中呈現 HTML 字串,而不需要進行轉義。
我碰到了這個問題 - 我需要在 React 應用程式中新增一個 HTML 字串,該字串來自所見即所得編輯器,但是簡單地在 JSX 中加入 {myString}
卻導致 HTML 被轉義,因此 HTML 標籤會顯示給使用者看!
我找到了兩個解決方案。第一個是原生方案,第二個則需要使用一個函式庫。
第一個解決方案:使用 dangerouslySetInnerHTML
你可以在 HTML 元素上使用 dangerouslySetInnerHTML
屬性來添加 HTML 字串到其內容中:
<div
dangerouslySetInnerHTML={{
__html: props.house.description
}}></div>
請記住這個屬性被稱為「危險」,有其原因。在這種情況下,HTML 不會被轉義,這可能會導致 XSS 安全問題。
但這個屬性也有其正確使用的場景。
第二個解決方案:使用第三方函式庫
有許多函式庫實現類似 dangerouslySetInnerHTML
的功能,並提供更簡單的使用方式。
其中一個函式庫是 react-html-parser
。
在 GitHub 上查看該函式庫: https://github.com/wrakky/react-html-parser
警告:在撰寫本文時,該函式庫已經兩年沒有更新了,所以未來可能會出現問題。但這個函式庫在我的案例中是可以使用的。
該選擇哪一個?
你可以尋找其他類似的函式庫,但最終,我選擇使用了 dangerouslySetInnerHTML
的方式。
「危險」這個名稱提醒我注意正確地設置白名單,以允許使用者在 HTML 字串中輸入我允許的 HTML 標籤。