如何将HTML字符串传入React组件并使其被正确识别渲染为HTML内容

React 默认会对所有嵌入的字符串内容做转义处理，避免XSS跨站脚本攻击，因此直接在JSX中插入HTML字符串只会展示为纯文本。你可以通过React内置的dangerouslySetInnerHTML API实现需求：

直接使用方案（仅适用于可信来源的HTML内容） #

将原渲染代码修改为如下写法即可：

<h6 
  className="..."
  dangerouslySetInnerHTML={{ __html: time }}
></h6>

注意：这个API名称带dangerously前缀是官方的风险提示，如果你传入的time属性内容来自用户提交、第三方接口等不可信来源，直接渲染会存在XSS注入风险，可能导致用户信息被盗、页面被篡改等问题。
额外提示：使用dangerouslySetInnerHTML的元素不能包含子节点，所以不要在<h6>标签内部再写其他内容。

安全增强方案（适用于不可信来源的HTML内容） #

如果无法保证HTML内容的安全性，需要先对字符串做消毒处理再渲染，你可以使用DOMPurify工具完成消毒：

• 第一步：安装依赖

npm install dompurify
# 或
yarn add dompurify

• 第二步：组件内引入并使用

import DOMPurify from 'dompurify';

// 渲染部分代码
<h6 
  className="..."
  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(time) }}
></h6>

内容的提问来源于stack exchange，提问作者Joe