gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 02:37:28 25 4
gpt4 key购买 nike

我通常使用 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)不匹配。

最佳答案

您可以定义 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 内的所有内容。

关于reactjs - 如何在 TypeScript 中使用 react-to-print?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61022107/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com