如何在 React 中正确设置 `contentRef`?

在 React 中，`contentRef` 是一个 `ref` 对象，用于在组件渲染完成后获取其对应的 DOM 节点，这对于像 `react-to-print` 这样的打印组件尤为重要，因为它需要知道要打印的内容是什么以及它的尺寸。

以下是设置 `contentRef` 的正确步骤：

1. 首先，在需要打印的 React 组件上添加 `ref` 属性：

import { useRef } from 'react'; // 引入 React 的 useRef hook

const PrintComponent = () => {
  const contentRef = useRef(null); // 创建一个 ref 对象

  // ...

  return (
    <div ref={contentRef}> <!-- 将 ref 作为 props 传递到此元素 -->
      {/* 此处是你的实际内容 */}
    </div>
  );
};

2. 当组件挂载完成并且内容节点可用时，你可以通过 `contentRef.current` 访问这个节点：

componentDidMount() {
  if (contentRef.current) {
    console.log('Content Ref is available:', contentRef.current);
  }
}

3. 如果你想在某个特定事件（如用户点击“打印”按钮）触发打印时，确保 `contentRef` 已经赋值：

handlePrint = () => {
  if (contentRef.current) {
    // 在这里调用 print API 或者传递给 react-to-print 的 `onPrint` 函数
  } else {
    console.error('Content Ref not ready yet.');
  }
};

// 然后在按钮或其他触发打印的地方调用 handlePrint
<button onClick={handlePrint}>Print</button>

记住，`ref` 只有在组件第一次渲染完成并拥有真实的 DOM 结构时才有效，所以在处理异步数据加载或延迟初始化的情况时要特别注意。