最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to print a Component in React? - Stack Overflow

programmeradmin3浏览0评论

I am making a simple resume generation app.

Index.js:

import ReactDOM from "react-dom";
import Resume from "../ponents/resume";
import React, { useRef } from "react";
import { useReactToPrint } from "react-to-print";

const App = () => {
  const ponentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => ponentRef.current
  });

  return (
    <div className="bg-gray-200 p-6">
      <button
        type="button"
        className="bg-gray-500 border border-gray-500 p-2 mb-4"
        onClick={handlePrint}
      >
        {" "}
        Print Resume{" "}
      </button>
      <Resume ref={ponentRef} />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

The resume gets generated from the ponents/resume.js file and it is a functional ponent..

I am using the react-to-print library to print the resume ponent alone.

Also took the reference from here ..

But in my application, If I click the Print Resume , then the resume doesn't gets printed..

Instead I get the following warnings,

Warning: Function ponents cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

and another warning as,

For "react-to-print" to work only Class based ponents can be printed.

Complete Working Example:

Please try clicking the Print Resume button in the above link where it doesn't print the resume.

Could you please help me to print the generated resume? Thanks in advance..

I am making a simple resume generation app.

Index.js:

import ReactDOM from "react-dom";
import Resume from "../ponents/resume";
import React, { useRef } from "react";
import { useReactToPrint } from "react-to-print";

const App = () => {
  const ponentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => ponentRef.current
  });

  return (
    <div className="bg-gray-200 p-6">
      <button
        type="button"
        className="bg-gray-500 border border-gray-500 p-2 mb-4"
        onClick={handlePrint}
      >
        {" "}
        Print Resume{" "}
      </button>
      <Resume ref={ponentRef} />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

The resume gets generated from the ponents/resume.js file and it is a functional ponent..

I am using the react-to-print library to print the resume ponent alone.

Also took the reference from here ..

But in my application, If I click the Print Resume , then the resume doesn't gets printed..

Instead I get the following warnings,

Warning: Function ponents cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

and another warning as,

For "react-to-print" to work only Class based ponents can be printed.

Complete Working Example:

https://codesandbox.io/s/tailwind-react-sandbox-forked-uivc8

Please try clicking the Print Resume button in the above link where it doesn't print the resume.

Could you please help me to print the generated resume? Thanks in advance..

Share Improve this question asked Sep 2, 2020 at 11:14 UndefinedUndefined 1,0216 gold badges27 silver badges52 bronze badges 4
  • do you want to convert your ponents to class based instead of function based? – elpmid Commented Sep 2, 2020 at 11:19
  • No, I need to have it as functional ponent alone.. Is it not possible to make in functional ponent? – Undefined Commented Sep 2, 2020 at 11:19
  • But I have tried npmjs./package/… this one only which is related to functional ponent.. – Undefined Commented Sep 2, 2020 at 11:20
  • okay i see i try it – elpmid Commented Sep 2, 2020 at 11:21
Add a ment  | 

2 Answers 2

Reset to default 11

You just have to use React.forwardRef()

const Resume = React.forwardRef((props, ref) => {
  // ...

  return (
    <div className="bg-gray-200 p-6" ref={ref}>
      ...
    </div>
  )
})

Forked codesandbox

The ponent you want to print will still need to be a class ponent so I converted the Resume ponent to a class ponent.

If you try using this as ref to pring <h1 ref={ponentRef}>HELLO?</h1> that will work even though a simple h1 tag is not class based ponent.

Try this on this edited sandbox of yours.

If you want a solid functional ponent you can migrate the Resume ponent as the child of <div ref={ponentRef} />.

发布评论

评论列表(0)

  1. 暂无评论