如何在不渲染的情况下引用组件

Question

所以im使用react打印库，它有一个内容：prop，它引用了元素、组件、

const componentRef = useRef();
const print = useReactToPrint({
content: () => componentRef.current,
});
<SecondaryInvoice
data={sender.order && senders.order.order}
ref={componentRef}
/>

但问题是这个SecondaryInvoice没有被渲染，因为我不需要。

我还在SecondaryInvoice中使用了forwardRef来传递参考

const SecondaryInvoice = React.forwardRef(({data}, ref) => {
return (
<> ....

我怎样才能做到这一点？感谢

Answer 1

好的，找到了一种方法，它有效，找不到更好的方法，希望有人发现它有用，如果有一天遇到同样的问题，

我把组件放在父组件中，这意味着它现在正在渲染

return (
<>
<SecondaryInvoice
data={senders.order && senders.order.order}
ref={componentRef}
</>

给它一个类，然后让它的不透明度为零，高度为0，你不能使用display none，然后在打印它时，在@print media查询中将高度设置回100%，并将操作码设置为1

.secondary-invoice {
opacity: 0;
height: 0px !important;
}
@media print {
.secondary-invoice {
opacity: 1;
height: 100% !important;
}