Question

我有一个像< b >hi< /b >这样的字符串。我必须将其渲染为＆＃34; hi ＆＃34;。有人能告诉我一个与Angular中的innerHTML相同的东西，我可以在React中使用吗？

Answer 1

您好，您可以尝试使用附带标记的dangerouslySetInnerHTML：

  <div dangerouslySetInnerHTML={{ __html: yourhtml }} />

Answer 2

根据官方React docs

dangerouslySetInnerHTML是React在浏览器DOM中使用innerHTML的替代品。通常，从代码设置HTML是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本（XSS）攻击。因此，您可以直接从React设置HTML，但是您必须键入dangerouslySetInnerHTML并使用__html键传递对象，以提醒自己这很危险。例如：

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Answer 3

在我的情况下，我使用了以下pacakge。

react-render-html

Answer 4

为避免使用 dangerouslySetInnerHTML 时存在的潜在安全漏洞（例如 XSS 攻击），您可以执行以下操作：

首先使用 DOMPurify 清理 HTML。

import DOMPurify from 'dompurify';

let clean = DOMPurify.sanitize(dirtyHtmlString, {USE_PROFILES: {html: true}});

然后它可以使用 react-render-html 进行渲染，正如 Salman Lone 所说：

import renderHTML from 'react-render-html';

<div>
   {renderHTML(clean)}
</div>

如何在React中呈现HTML字符串？

4 个答案: