如何使用 API 响应中的 HTML 标记 [重复]

Posted 2023-02-21

【中文标题】如何使用 API 响应中的 HTML 标记 [重复]

【英文标题】：How to use HTML Markup from API Response [duplicate]

【发布时间】：2019-11-05 19:29:00

【问题描述】：

我正在调用 API，结果中包含一些 html 标记（示例如下）。有没有一种方法可以在显示结果时使用该标记，或者我最好删除它？我正在使用 React JS 并将结果呈现到网页上。

<p>Each night a park ranger will present an illustrated program highlighting a 
different aspect of Yellowstone’s wonders. Inquire at Fishing Bridge Visitor 
Information Center or look on local bulletin boards for the night's subject.</p> 
<p>Meet at the Bridge Bay Campground Amphitheater. <em>Dress warmly and bring a 
flashlight.</em> Accessible. 45 minutes.</p>

【参考方案1】：

您可以使用下面的方法，只需像往常一样传递 html 内容并呈现返回值。

export const renderHTMLContent = (htmlContent) =>
  React.createElement('div', 
    dangerouslySetInnerHTML:  __html: htmlContent,
  );

【参考方案2】：

如果您的 HTML 已经过净化（您可以使用 sanitize-html 包 https://www.npmjs.com/package/sanitize-html，并希望使用 dangerouslySetInnerHTML https://reactjs.org/docs/dom-elements.html 来呈现净化后的字符串。