Как использовать реагировать на печать с TypeScript?

Question

Я обычно использую реакцию на печать (https://www.npmjs.com/package/react-to-print) для печати реагирующих компонентов с минимальными усилиями и большой гибкостью. Я начинаю писать свои приложения с помощью TypeScript, и мне впервые нужно объединить эти две вещи.

Это мой код:

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

Чтобы создать ссылку, я просто выполните:

const componentRef = useRef();

В JavaScript это работает, но когда я использую tsx, я получаю сообщение об ошибке в параметре «content» компонента ReactToPrint, а другое в параметре ref моего собственного PrintableComponent. , Может ли кто-нибудь помочь мне с этим?

В основном ошибки говорят о том, что интерфейсы не совпадают.

Answer 1

Похоже, известная проблема при использовании хуков: https://github.com/gregnb/react-to-print/issues/214

В качестве альтернативы, вы можете избежать хука useRef и следовать примеру в репозитории исходного кода, который, кажется, работа в TypeScript:

https://github.com/gregnb/react-to-print/blob/master/example/index.tsx

, т. е. первый пример в npm readme do c: https://www.npmjs.com/package/react-to-print#example