使用ReactToPrint打印React组件时遇引用未定义问题求助

问题原因分析 #

1. 初始渲染时componentRef.current输出undefined是正常现象——React组件挂载完成前，ref还未绑定到DOM元素上，顶层的console.log会提前执行，所以拿到的是初始值，但这不是打印失败的核心原因。
2. 打印报错的核心大概率是react-to-print版本兼容问题，或者useReactToPrint的配置细节需要调整。

具体修复方案 #

方案1：完善ref校验与打印逻辑 #

给打印逻辑添加ref存在性校验，同时控制按钮可用性，避免无效点击：

import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';
import { HeaderText } from '../HeaderText/HeaderText';

export const StartPage = () => {
  const componentRef = useRef();
  
  const handlePrint = useReactToPrint({
    content: () => {
      if (!componentRef.current) {
        console.error("未获取到打印内容的DOM引用");
        return null;
      }
      return componentRef.current;
    },
    onError: (error) => console.error("打印出错:", error)
  });

  return (
    <>
      <div ref={componentRef}>
        <HeaderText />
      </div>
      <button onClick={handlePrint} disabled={!componentRef.current}>Print</button>
    </>
  )
};

方案2：锁定react-to-print稳定版本 #

如果是版本API变动导致的问题，卸载当前版本后安装稳定版：

npm uninstall react-to-print
npm install react-to-print@2.14.13

方案3：改用类组件写法（备选测试） #

如果函数组件的useRef依旧有问题，临时用类组件验证功能：

import React from 'react';
import ReactToPrint from 'react-to-print';
import { HeaderText } from '../HeaderText/HeaderText';

class StartPage extends React.Component {
  render() {
    return (
      <>
        <div ref={el => (this.componentRef = el)}>
          <HeaderText />
        </div>
        <ReactToPrint
          trigger={() => <button>Print</button>}
          content={() => this.componentRef}
        />
      </>
    );
  }
}

export default StartPage;

额外排查点 #

• 检查HeaderText组件是否有条件渲染逻辑，导致打印内容为空。
• 确保目标div内没有display: none等隐藏样式，否则会被判定为无内容可打印。

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