正确使用 ReactToPrint？

Question

问题是应该提供打印选项的按钮不再起作用。

控制台中的错误说：

To print a functional component ensure it is wrapped with `React.forwardRef`, and ensure the forwarded ref is used. See the README for an example: https://github.com/gregnb/react-to-print#examples

我已经看到一些专门针对同一问题的解决方案，但我无法使其发挥作用。

有什么建议吗？

这是我正在使用的库： ReactToPrint npm

反应打印

---

import { useRef } from "react";
import { useReactToPrint } from "react-to-print";
import Resume from "./Pdf/Pdf";

const  Example = () => {
  const componentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => componentRef.current
  });
  
  return (
    <div >
    <button onClick={handlePrint}>   ------> NOT WORKING!
      Descargar Pdf
    </button>
    <Resume ref={componentRef} />   ------> COMPONENT TO PRINT
  </div>
  );
};

export default Example;

---

要打印的组件

---

 import React from "react";
import styled from 'styled-components';
import PdfSection from './PdfSection';
import AlienLevel from './AlienLevel';
import {connect } from 'react-redux';

class Resume  extends React.Component {
  renderList = () => {
    return this.props.posts.diagnose.map((post) => {
      return (
        <PdfSection
          key={post.id}
          id={post.id}
          divider={"/images/pdf/divider.png"}
          img={"/images/alienRandom.png"}
          title={post.title}
          // data={post.data}
          text={post.text0}
          subtext={post.subtext0}
        />
      );
    });
  };

  render(){

  return (
    <div>
      <Container>
        <Page>
          <Portada>
            <img id="portada" src="/images/pdf/PortadaPdf.png" />
          </Portada>
        </Page>

        <Page>
          <AlienLevel
            result= "{props.diagn}{"
            character={"/images/pdf/alienMedio.png"}
            fileName={"responseBody[4].data"}
            level={"/images/pdf/level6.png"}
            correct={"/images/pdf/correct.png"}
            medium={"/images/pdf/medium.png"}
            incorrect={"/images/pdf/incorrect.png"}
            text='"Necesitas mejorar tus prácticas intergalácticas de CV, pero ya eres nivel medio!"'
          />
          <div>{this.renderList()}</div>
        </Page>
      </Container>
    </div>
  );
};
}
const mapStateToProps = (state) => {
  return { posts: state.posts };
};

export default connect(mapStateToProps)( Resume);

提前致谢！

Answer 1

问题在于 react-redux 的connect() react-redux 。 您将组件包装在connect中，并且默认情况下connect不会转发 ref。 这意味着，您在此处传递的 ref <Resume ref={componentRef} />不会到达您的组件。

您需要在 connect function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)的第四个参数中传递 options { forwardRef: true } 。

只需更改此代码export default connect(mapStateToProps)(Resume); 在Resume组件中对此

export default connect(mapStateToProps, null, null, { forwardRef: true })(Resume);

Answer 2

对于遇到相同错误的任何人，似乎他们找到了解决此问题的正确方法，我实际上是按照我在 Github 问题中找到的 Codesandbox 解决了这个问题，这里是链接。 希望有用！ -->

链接到 GITHUB 特定问题（已解决！！）

Answer 3

我有同样的问题，我很高兴尽快分享我的发现。 该组件必须使用 ref 在某处呈现。

我使用 React Material UI 的 Backdrop将它添加到我的页面中作为隐藏。 或者你可以使用下面的例子中的钩子来隐藏它。

使用背景并且仅在我需要预览打印时调用它。

<Backdrop sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
 open={openBD}>
   <ComponentToPrint ref={componentRef} />
</Backdrop>

使用 Hooks 和显示样式仅在需要时显示。

const [isReady, setIsReady] = useState("none");

<Paper style={{ display: isReady }} >
 <ComponentToPrint ref={componentRef} />
</Paper>

<Button
 variant="contained"
 endIcon={<BackupTableRoundedIcon />}
 onClick={() => setIsReady("")}
>
  Start Printing
 </Button>

注意：我使用了 MUI 组件，如果您决定复制粘贴，则将 Button 更改为 html <button 和 paper 到 <div。 希望这可以帮助。