Reactjs 如何使用react打印TypeScript？

我通常使用react-to-print（）来打印react组件，工作量小，灵活性强。我开始用TypeScript编写我的应用程序，这是我第一次需要将这两种东西结合起来

这是我的代码：

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

在JavaScript中它可以工作，但是当我使用tsx时，我在ReactTopPrint组件的“content”参数中得到一个错误，在我自己的PrintableComponent的ref参数中得到另一个错误。有人能帮我吗

---

基本上，错误表明接口不匹配。

在使用钩子时似乎是一个已知问题：

作为替代方案，您可以避免使用

useRef

钩子，并遵循源repo中的示例，该示例似乎在TypeScript中工作：

i、 例如，npm自述文件上的第一个示例：

---

您现在可能已经找到了答案，但这正是我找到您的问题时一直在寻找的答案。 您可以为useRef定义类型以消除ts错误：

const componentRef=useRef（空）

如果您和我一样，正在使用功能组件，那么您在尝试使用该组件打印基于类的组件时会遇到问题。要绕过此错误，可以将要打印的组件包装到div中：

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

Generar}
content={（）=>componentRef.current}
/>

---

此div中的所有内容都将被打印。

您是否安装了

@types/react

软件包？

const componentRef = useRef<HTMLDivElement>(null)

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