/

如何在 React 中呈現 HTML

如何在 React 中呈現 HTML

學習如何在 React 中呈現 HTML 字串，而不需要進行轉義。

我碰到了這個問題 - 我需要在 React 應用程式中新增一個 HTML 字串，該字串來自所見即所得編輯器，但是簡單地在 JSX 中加入 {myString} 卻導致 HTML 被轉義，因此 HTML 標籤會顯示給使用者看！

我找到了兩個解決方案。第一個是原生方案，第二個則需要使用一個函式庫。

第一個解決方案：使用 dangerouslySetInnerHTML

你可以在 HTML 元素上使用 dangerouslySetInnerHTML 屬性來添加 HTML 字串到其內容中：

1
2
3
4
<div
 dangerouslySetInnerHTML={{
     __html: props.house.description
 }}></div>

請記住這個屬性被稱為「危險」，有其原因。在這種情況下，HTML 不會被轉義，這可能會導致 XSS 安全問題。

但這個屬性也有其正確使用的場景。

第二個解決方案：使用第三方函式庫

有許多函式庫實現類似 dangerouslySetInnerHTML 的功能，並提供更簡單的使用方式。

其中一個函式庫是 react-html-parser。

在 GitHub 上查看該函式庫： https://github.com/wrakky/react-html-parser

警告：在撰寫本文時，該函式庫已經兩年沒有更新了，所以未來可能會出現問題。但這個函式庫在我的案例中是可以使用的。

該選擇哪一個？

你可以尋找其他類似的函式庫，但最終，我選擇使用了 dangerouslySetInnerHTML 的方式。

「危險」這個名稱提醒我注意正確地設置白名單，以允許使用者在 HTML 字串中輸入我允許的 HTML 標籤。