如何在React中呈現HTML

了解如何使用React在DOM中呈現HTML字符串而不進行轉義

我遇到了這個問題-我需要在React應用程序中添加HTML字符串,該字符串來自WYSIWYG編輯器,但只需添加{myString}JSX正在轉義HTML ..以便向用戶顯示HTML標籤!

我該如何解決?我基本上看到了2個解決方案。第一個本機,第二個本機需要一個庫。

第一種解決方案:使用dangerouslySetInnerHTML

您可以使用dangerouslySetInnerHTMLHTML元素上的屬性,以在其內容內添加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標籤正確地列入白名單。

免費下載我的反應手冊


更多反應教程: