使用react-to-print打印多组件到单独页面时遇组件识别错误

AI 小北

2026-7-5

解决react-to-print打印多个组件报错的问题

错误原因

react-to-print的content函数要求返回单个DOM元素或React组件实例，你直接返回了ref数组（qrRefs.current是包含多个元素的数组），不符合工具的参数要求，因此触发"Argument appears to not be a ReactComponent"错误。

解决方案

方案1：使用单个父容器ref（推荐，实现更简洁）

定义父容器的ref，用来包裹所有要打印的元素：

const printContainerRef = useRef(null);

渲染时将所有待打印元素放入该容器，同时给每个元素添加分页样式（确保每个元素单独占一页）：

{/* 这个容器可以设置为隐藏，仅用于打印逻辑 */}
<div ref={printContainerRef} style={{ display: 'none' }}>
  {rowSelection.map((el, i) => (
    <div 
      key={i} 
      style={{ 
        pageBreakAfter: i !== rowSelection.length - 1 ? 'always' : 'auto',
        // 可选：添加打印时的内边距等样式
        padding: '20px'
      }}
    >
      <p>{el.id}</p>
    </div>
  ))}
</div>

修改打印函数，让content返回父容器的ref：

const handlePrintQR = useReactToPrint({
  content: () => printContainerRef.current,
  copyStyles: true,
});

方案2：基于原有ref数组改造

如果需要保留ref数组的使用，可以在content函数中将数组元素组装成单个容器元素：

const handlePrintQR = useReactToPrint({
  content: () => {
    const printContainer = document.createElement('div');
    qrRefs.current.forEach((el, index) => {
      const elementClone = el.cloneNode(true);
      // 给每个元素加分页样式，最后一个元素不加分页避免空页
      if (index !== qrRefs.current.length - 1) {
        elementClone.style.pageBreakAfter = 'always';
      }
      printContainer.appendChild(elementClone);
    });
    return printContainer;
  },
  copyStyles: true,
});