Question

所以我使用 react-to-print 库，它有一个 content: 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

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

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

ModuleNotFoundError

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

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

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

1 个答案: