Next.js中如何正确解析渲染JSON响应内的HTML标签内容？

问题原因 #

React默认会对插值语法{}传入的所有字符串做转义处理，这是内置的XSS攻击防护机制，因此你直接传入HTML字符串时，标签会被当作普通文本渲染，不会被解析为真实的DOM元素。

方案1：使用内置dangerouslySetInnerHTML属性 #

适合完全信任API返回内容、或已经提前做了HTML消毒的场景，实现方式最简单：

// 直接替换你原来的p标签写法即可，注意标签内部不要写其他子内容
<p dangerouslySetInnerHTML={{ __html: description }} />

方案2：解析为React组件（更灵活，推荐） #

如果需要自定义渲染规则，比如把HTML中的<a>标签替换为Next.js内置的<Link>组件获得更丝滑的路由跳转体验，可以用html-react-parser库实现：

1. 安装依赖

npm install html-react-parser
# 或用yarn/pnpm
pnpm add html-react-parser

2. 基础用法

import parse from 'html-react-parser';

// 组件内渲染写法
<p>{parse(description)}</p>

3. 进阶：替换<a>标签为Next.js的Link

import parse from 'html-react-parser';
import Link from 'next/link';

// 组件内渲染
<p>
  {parse(description, {
    replace: (domNode) => {
      if (domNode.name === 'a') {
        const href = domNode.attribs.href;
        const isInternalLink = href.startsWith('/');
        // 内部链接用Next.js Link，外部链接保留a标签
        if (isInternalLink) {
          return <Link href={href}>{domNode.children.map(child => child.data)}</Link>
        }
      }
    }
  })}
</p>

安全提示 #

只要HTML内容来自不可控的第三方接口，必须先对内容做消毒处理，过滤掉恶意的script标签、行内事件等危险代码，避免XSS攻击，你可以使用isomorphic-dompurify这类适配SSR的消毒库处理内容后再渲染。

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