React-PDF解析HTML字符串渲染PDF时出现无效React子元素报错

你遇到的报错核心来自两个问题：

1. DOMParser.parseFromString 解析后返回的是原生浏览器DOM节点对象，属于普通JavaScript对象，不是React可识别的React元素/虚拟DOM，直接放到JSX中作为子节点渲染，就会触发「Objects are not valid as a React child」的报错。
2. react-pdf本身不支持直接渲染web端原生HTML标签（比如<div>、<p>），也不支持dangerouslySetInnerHTML这类web端专属API，它提供了一套独立的内置组件体系，所有输出到PDF的内容都必须基于这套组件实现。

根据你要解析的HTML复杂度，可以选两种实现方式：

方案1：简单HTML自行实现节点转换 #

如果你的HTML只有段落、标题、换行、基础行内格式（加粗/斜体/链接）这类简单结构，可以写一个递归转换函数，把解析出来的原生DOM节点映射为react-pdf支持的内置组件。
首先导入需要的react-pdf内置组件：

import { Text, View, Link } from '@react-pdf/renderer';

编写递归转换逻辑：

const domToPdfElement = (node) => {
  // 文本节点直接返回内容
  if (node.nodeType === Node.TEXT_NODE) {
    return node.textContent;
  }
  // 跳过注释、文档类型等非元素节点
  if (node.nodeType !== Node.ELEMENT_NODE) {
    return null;
  }

  const tagName = node.tagName.toLowerCase();
  // 递归处理所有子节点
  const children = Array.from(node.childNodes).map(domToPdfElement);

  // 按标签映射为对应pdf组件，可自行调整样式
  switch (tagName) {
    case 'h1':
      return <Text style={{ fontSize: 24, fontWeight: 'bold', marginVertical: 8 }}>{children}</Text>;
    case 'h2':
      return <Text style={{ fontSize: 20, fontWeight: 'bold', marginVertical: 6 }}>{children}</Text>;
    case 'h3':
      return <Text style={{ fontSize: 16, fontWeight: 'bold', marginVertical: 4 }}>{children}</Text>;
    case 'p':
      return <Text style={{ fontSize: 12, marginVertical: 4 }}>{children}</Text>;
    case 'br':
      return <Text>\n</Text>;
    case 'strong':
    case 'b':
      return <Text style={{ fontWeight: 'bold' }}>{children}</Text>;
    case 'em':
    case 'i':
      return <Text style={{ fontStyle: 'italic' }}>{children}</Text>;
    case 'a':
      return <Link src={node.getAttribute('href')} style={{ color: '#165DFF' }}>{children}</Link>;
    case 'div':
    case 'section':
      return <View>{children}</View>;
    default:
      // 未知标签默认只渲染内部文本
      return <Text>{children}</Text>;
  }
};

修改原有渲染逻辑即可：

units.map((unit) => {
  if (!unit.text) return null;
  const parser = new DOMParser();
  const doc = parser.parseFromString(unit.text, 'text/html');
  // 遍历所有根节点转换为pdf元素
  const pdfContent = Array.from(doc.body.childNodes).map(domToPdfElement);

  return (
    <View key={unit._id} style={{ marginVertical: 8 }}>
      {pdfContent}
    </View>
  )
})

方案2：复杂HTML使用现成转换库 #

如果你的HTML包含列表、表格、图片、复杂嵌套样式，自行写转换逻辑成本太高，可以直接使用适配react-pdf的HTML渲染库实现：

1. 安装依赖

npm install react-pdf-html

2. 直接引入组件渲染HTML字符串

import Html from 'react-pdf-html';
import { View } from '@react-pdf/renderer';

// 渲染逻辑
units.map((unit) => {
  if (!unit.text) return null;
  return (
    <View key={unit._id} style={{ marginVertical: 8 }}>
      <Html>{unit.text}</Html>
    </View>
  )
})

• react-pdf渲染树中不能直接使用普通web HTML标签，容器统一用View组件，所有文本内容必须包裹在Text组件内，否则会触发渲染错误。
• 自行实现转换逻辑时，如果需要支持列表、表格等标签，可以在标签映射的switch分支中自行扩展结构和样式。
• 不要在react-pdf组件上使用dangerouslySetInnerHTML属性，该能力仅在web端React DOM中支持。

内容的提问来源于stack exchange，提问作者beginnersLuck.css