如何实现点击打印时才挂载React组件并完成打印，且不显示在页面？

你遇到的核心问题是react-to-print的content参数需要获取已挂载到DOM的元素引用，而非直接传入JSX。要实现点击按钮才挂载目标组件并启动打印，同时避免提前挂载隐藏组件，可以通过状态控制组件挂载时机，配合打印回调完成流程：

实现步骤 #

• 用状态变量控制打印组件的挂载与卸载
• 点击按钮时触发状态变更，挂载打印组件
• 组件挂载完成后自动触发打印流程
• 打印结束后卸载组件释放资源

完整代码示例 #

import { useReactToPrint } from "react-to-print";
import Print from "./Print";
import { useState, useRef, useEffect } from "react";

const YourComponent = ({ id }) => {
  const [isPrinting, setIsPrinting] = useState(false);
  const printComponentRef = useRef(null);

  // 配置打印逻辑
  const handlePrint = useReactToPrint({
    content: () => printComponentRef.current,
    // 打印完成后卸载组件
    onAfterPrint: () => setIsPrinting(false),
  });

  // 组件挂载完成后触发打印
  useEffect(() => {
    if (isPrinting) {
      handlePrint();
    }
  }, [isPrinting, handlePrint]);

  return (
    <>
      <button onClick={() => setIsPrinting(true)}>Print It</button>
      {/* 仅在打印状态下挂载组件 */}
      {isPrinting && <Print ref={printComponentRef} id={id} />}
    </>
  );
};

export default YourComponent;

方案说明 #

1. 状态控制挂载：isPrinting状态默认是false，此时Print组件不会渲染到DOM中，完全避免了提前挂载的性能损耗
2. 触发打印时机：点击按钮后设置isPrinting为true，Print组件开始挂载；useEffect监听状态变化，组件挂载完成后调用打印方法
3. 打印后清理：onAfterPrint回调会在打印对话框关闭后执行，此时把isPrinting设为false，自动卸载Print组件，保持DOM简洁

这样既满足了点击才挂载组件的需求，又符合react-to-print的使用要求，同时兼顾了性能。

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