打印一个反应功能组件

Posted 2023-03-16

【中文标题】打印一个反应功能组件

【英文标题】：Print a react functional component

【发布时间】：2021-12-31 18:48:43

【问题描述】：

大家好，我已经使用功能组件开发了一个 react 应用程序，我需要在应用程序中打印一个特定的页面。由于每个页面都是一个功能组件，我想也许我们可以单独打印一个组件。我尝试使用 react-to-print 但它只支持类组件？这可以通过一些 NPM 包来实现吗？

【参考方案1】：

您可以将react-to-print 与常见问题解答中所述的功能组件一起使用。 这是他们在 npm 网站上使用的示例

import React,  useRef  from 'react';
import ReactToPrint from 'react-to-print';

import  ComponentToPrint  from './ComponentToPrint';

const Example = () => 
  const componentRef = useRef();

  return (
    <div>
      <ReactToPrint
        trigger=() => <button>Print this out!</button>
        content=() => componentRef.current
      />
      <ComponentToPrint ref=componentRef />
    </div>
  );
;

【讨论】：

我的 ComponentToPrint 也是一个功能组件，这个解决方案也可以在那里工作吗？像我们可以在那里的功能组件中设置 ref 属性吗？