reactjs - 如何在 TypeScript 中使用 react-to-print？

Question

我通常使用 react-to-print ( https://www.npmjs.com/package/react-to-print ) 来打印 React 组件，而且工作量小、灵 active 高。我开始使用 TypeScript 编写我的应用程序，这是我第一次需要将这两件事结合起来。
这是我的代码:

<ReactToPrint
  trigger={() => <Button variant="contained" color="primary">Generar</Button>}
  content={() => componentRef.current}
/>
<PrintableComponent ref={componentRef} />

要创建引用，我只需执行以下操作:

const componentRef = useRef();

在 JavaScript 中，它可以工作，但是当我使用 .tsx 时，我在 ReactToPrint 组件的“content”参数和我自己的 PrintableComponent 的 ref 参数中得到一个错误。有人可以帮我解决这个问题吗？
基本上，错误表明接口(interface)不匹配。

Answer 1

您可以定义 useRef 的类型以摆脱 ts 错误 credit to shane935 :

const componentRef = useRef<HTMLDivElement>(null)

如果您像我一样使用功能组件，您将在尝试使用基于 react-to-print 类的组件之后的引用时遇到问题。要绕过此错误，您可以将要打印的组件包装在 div 中:

<ReactToPrint
  trigger={() => <Button variant="contained" color="primary">Generar</Button>}
  content={() => componentRef.current}
/>
<div ref={componentRef}>
  <PrintableComponent />
</div>

将打印此 div 内的所有内容。