Как распечатать компонент в React?

#javascript #reactjs #printing

#javascript #reactjs #печать

Вопрос:

Я создаю простое приложение для генерации резюме.

Index.js:

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

const App = () => {
  const componentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => componentRef.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={componentRef} />
    </div>
  );
};

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

Резюме генерируется из components/resume.js файла и является функциональным компонентом..

Я использую библиотеку react-to-print для печати одного компонента resume.

Также взял ссылку из здесь ..

Но в моем приложении, если я нажимаю Print Resume , резюме не печатается..

Вместо этого я получаю следующие предупреждения,

Предупреждение: функциональным компонентам нельзя указывать ссылки. Попытки получить доступ к этой ссылке завершатся неудачей. Вы имели в виду использовать React.forwardRef()?

и еще одно предупреждение в виде,

Для работы «react-to-print» можно печатать только компоненты на основе классов.

Полный рабочий пример:

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

Пожалуйста, попробуйте нажать Print Resume кнопку в приведенной выше ссылке, где не печатается резюме.

Не могли бы вы, пожалуйста, помочь мне распечатать сгенерированное резюме? Заранее спасибо..

1. вы хотите преобразовать свои компоненты в основанные на классах, а не на функциях?

2. Нет, мне нужно, чтобы он был только функциональным компонентом.. Разве это невозможно сделать в функциональном компоненте?

3. Но я пытался npmjs.com/package /… это только тот, который связан с функциональным компонентом..

4. хорошо, я вижу, что я пытаюсь это

Ответ №1:

Вам просто нужно использовать React.forwardRef()

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

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

Разветвленный codesandbox

Ответ №2:

Компонент, который вы хотите распечатать, все равно должен быть компонентом класса, поэтому я преобразовал Resume компонент в компонент класса.

Если вы попытаетесь использовать это как ссылку на pring <h1 ref={componentRef}>HELLO?</h1> , это сработает, даже если простой тег h1 не является компонентом на основе класса.

Попробуйте это в этой вашей отредактированной песочнице.

Если вам нужен надежный функциональный компонент, вы можете перенести Resume компонент как дочерний <div ref={componentRef} /> .