如何在React路由渲染的确认页中集成react-to-print实现打印

直接按以下步骤修改SectionPresenter组件（确认页由该组件渲染）：

1. 导入必要依赖
   在SectionPresenter组件顶部添加以下导入语句：

import { useReactToPrint } from "react-to-print";
import { useRef } from "react";
import PropTypes from "prop-types";

2. 在组件内部定义打印逻辑
   在SectionPresenter函数组件内部，添加打印相关的ref、处理函数和按钮组件：

const SectionPresenter = ({ section, returnToCart, openExitModal }) => {
  // 创建ref，用于绑定需要打印的DOM元素
  const dataToPrintRef = useRef();

  // 初始化打印处理函数
  const handlePrint = useReactToPrint({
    content: () => dataToPrintRef.current,
  });

  // 定义打印按钮组件
  const PrintButton = ({ handlePrint }) => {
    PrintButton.propTypes = {
      handlePrint: PropTypes.func.isRequired,
    };
    return <button onClick={handlePrint}>打印订单</button>;
  };

  // 组件原有业务逻辑...

3. 绑定打印内容并添加按钮
   将确认页中需要打印的内容用容器包裹，绑定dataToPrintRef，同时把打印按钮放到页面合适位置：

return (
  <div className="confirmation-page">
    {/* 打印按钮：放在页面顶部/底部等显眼位置 */}
    <PrintButton handlePrint={handlePrint} />

    {/* 需要打印的内容区域：用ref绑定 */}
    <div ref={dataToPrintRef}>
      {/* 这里放置确认页的所有核心内容，比如订单详情、用户信息等 */}
      <h2>订单确认单</h2>
      {/* 你的确认页具体内容... */}
    </div>

    {/* 页面非打印内容（如返回购物车按钮） */}
    <button onClick={returnToCart}>返回购物车</button>
  </div>
);

4. 关键修正说明

• 你之前写的cotentTag.propTypes写法错误，无需额外定义propTypes，直接给目标DOM容器添加ref={dataToPrintRef}即可。
• 确保dataToPrintRef绑定的容器仅包含需要打印的内容，非打印元素（如操作按钮、弹窗触发器）不要放入该容器。
• 若需自定义打印样式，可通过CSS的@media print规则调整，比如隐藏非打印元素、优化打印布局。

内容的提问来源于stack exchange，提问作者Dev Anand Sadasivam