本文介绍一种简洁可靠的方案：利用 CSS 的 break-after: page 属性配合单个 ref 容器，让 react-to-print 将列表中的每个组件自动输出到独立打印页，避免 ref 数组导致的类型错误。

本文介绍一种简洁可靠的方案：利用 css 的 `break-after: page` 属性配合单个 ref 容器，让 `react-to-print` 将列表中的每个组件自动输出到独立打印页，避免 ref 数组导致的类型错误。

在使用 react-to-print 进行批量打印时，一个常见误区是试图为多个子元素分别创建 ref 并传入 content 函数（如 qrRefs.current 数组）。但 react-to-print 的 content 选项必须返回一个单一的、有效的 React DOM 元素（即 HTMLElement），而非数组或非组件对象——这正是报错 Argument appears to not be a ReactComponent. Keys: 0,1 的根本原因。

✅ 正确做法是：只用一个 useRef() 指向一个外层容器，并通过 CSS 控制分页行为。以下是完整实现步骤：

1. 定义单个 ref 容器

   

   react-modernization

   将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新

   下载

   const qrRef = useRef<HTMLDivElement>(null);

2. 渲染带分页样式的容器与子项
   在 JSX 中包裹整个列表，并为每个需独占一页的子组件添加 style={{ breakAfter: 'page' }}（兼容现代浏览器，包括 Chrome、Edge、Firefox）：

   <div ref={qrRef}>
     {rowSelection.map((el, i) => (
       <p
         key={el.id} // ✅ 建议用唯一 id 替代索引作为 key
         style={{ 
           breakAfter: 'page',
           margin: '0',      // 可选：清除默认段落间距，提升排版一致性
           padding: '20px'   // 可选：增加内容呼吸感
         }}
       >
         ID: {el.id}
       </p>
     ))}
   </div>

3. 配置 useReactToPrint
   直接传入该容器 ref 的 current 值（确保其为有效 DOM 元素）：

   const handlePrintQR = useReactToPrint({
     content: () => qrRef.current,
     copyStyles: true, // ✅ 保留内联样式及页面 CSS（含 break-after）
     documentTitle: 'QR-Codes-Print',
   });

⚠️ 注意事项：

• break-after: 'page' 在 Safari 中支持有限（建议测试或降级为 page-break-after: always 以增强兼容性）；
• 若需首项前不空页，可在第一个 <p></p> 上添加 style={{ breakBefore: 'auto' }} 避免冗余分页；
• 打印预览中若未生效，请检查是否被其他 CSS（如 overflow: hidden 或 transform）干扰分页上下文；
• 确保 qrRef.current 不为 null —— useReactToPrint 内部已做安全处理，但自定义逻辑中建议判空。

? 总结：与其绕路管理 ref 数组并触发类型错误，不如回归语义化 CSS 分页方案。它更轻量、更稳定，且完全符合 react-to-print 的设计预期——你只需提供一个可打印的 DOM 节点，其余交给浏览器原生打印引擎。