React.js渲染含HTML标签的JSON数据标签被转义的解决方法

问题根因 #

React默认会对JSX中插入的字符串做自动转义，所有HTML标签会被转义为普通文本字符渲染，这是框架默认的XSS防护机制，不是代码bug。
另外你贴的原有渲染代码还有一处语法问题：map遍历的回调中直接写{Head}无法取到值，Head是遍历项的对象属性，需要通过当前遍历项访问。

可用方案 #

方案1：使用原生dangerouslySetInnerHTML属性（无需额外依赖） #

这是React官方提供的渲染原始HTML的能力，使用时需要给属性传入一个携带__html字段的对象，值为要渲染的HTML字符串：

const Paper = [{ Head: "<strong>Heading Content</strong>sub-heading", content: ["sample texts...."] }];

// 修正后的渲染代码
{Paper.map((paperItem, idx) => (
  <div className='news-papper' key={idx}>
    <div dangerouslySetInnerHTML={{ __html: paperItem.Head }}></div>
  </div>
))}

注意：该方法会直接原样解析所有HTML内容，如果要渲染的内容来自用户提交等不可信来源，会存在XSS注入风险，仅在确认内容完全可信时使用。

方案2：使用HTML解析库转换为React节点（适合复杂HTML场景） #

如果要渲染的HTML结构复杂，或者需要对节点做自定义处理，可以使用解析库直接把HTML字符串转为React可识别的虚拟DOM节点再渲染，以常用的html-react-parser为例：

1. 先安装依赖

npm install html-react-parser
# 如果要处理不可信内容，建议同时安装dompurify做内容消毒
npm install dompurify

2. 渲染代码

import parse from 'html-react-parser';
import DOMPurify from 'dompurify';

const Paper = [{ Head: "<strong>Heading Content</strong>sub-heading", content: ["sample texts...."] }];

{Paper.map((paperItem, idx) => (
  <div className='news-papper' key={idx}>
    {/* 渲染前先消毒过滤恶意内容，可信内容可跳过DOMPurify处理 */}
    {parse(DOMPurify.sanitize(paperItem.Head))}
  </div>
))}

两种方案都可以实现strong标签正常解析、文本加粗的预期效果。

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