如何在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标签正确地列入白名单。

免费下载我的反应手册


更多反应教程: