學習如何在 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 標籤。