es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Hola, soy nuevo en React js, ¿me puedes ayudar a convertir este componente de clase en un componente funcional?

Hola, soy nuevo en React js, ¿me puedes ayudar a convertir este componente de clase en un componente funcional?

31 Jul, 2023 Programación

Hola, este es el código siguiente. ¿Cómo se puede convertir este componente de clase a componente funcional en React js?
Hola, soy nuevo en React js, ¿me puedes ayudar a convertir este componente de clase a componente funcional? Estoy intentando crear un botón que, al hacer clic, genere un PDF utilizando jspdf y jspdf autotable.

    import React from 'react';
    import jsPDF from "jspdf";
    import "jspdf-autotable";
    import './App.css';

    const App = () => {

      const [people, setPeople] = React.useState([
        { name: "Keanu Reeves", profession: "Actor" },
        { name: "Lionel Messi", profession: "Football Player" },
        { name: "Cristiano Ronaldo", profession: "Football Player" },
        { name: "Jack Nicklaus", profession: "Golf Player" },
      ]);

      const exportPDF = () => {
        const unit = "pt";
        const size = "A4"; // Utilizar A1, A2, A3 o A4
        const orientation = "portrait"; // portrait o landscape

        const marginLeft = 40;
        const doc = new jsPDF(orientation, unit, size);

        doc.setFontSize(15);

        const title = "My Awesome Report";
        const headers = [["NAME", "PROFESSION"]];

        const data = people.map(elt => [elt.name, elt.profession]);

        let content = {
          startY: 50,
          head: headers,
          body: data
        };

        doc.text(title, marginLeft, 40);
        doc.autoTable(content);
        doc.save("report.pdf")
      }

      return (
        <div>
          <button onclick="{()" ==""> exportPDF()}>Generar Reporte</button>
        </div>
      );
    }

    export default App;
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para convertir este componente de clase a un componente funcional en React, sigue los siguientes pasos:

    1. Importa React y el hook useState en la parte superior del archivo:
    import React, { useState } from 'react';
import jsPDF from 'jspdf';
import 'jspdf-autotable';
import './App.css';
    1. Crea un componente funcional llamado App y declara el estado utilizando el hook useState:
    const App = () => {
  const [people, setPeople] = useState([
    { name: "Keanu Reeves", profession: "Actor" },
    { name: "Lionel Messi", profession: "Jugador de fútbol" },
    { name: "Cristiano Ronaldo", profession: "Jugador de fútbol" },
    { name: "Jack Nicklaus", profession: "Jugador de golf" },
  ]);

  const exportPDF = () => {
    const unit = "pt";
    const size = "A4"; // Usa A1, A2, A3 o A4
    const orientation = "portrait"; // portrait o landscape

    const marginLeft = 40;
    const doc = new jsPDF(orientation, unit, size);

    doc.setFontSize(15);

    const title = "Mi Increíble Informe";
    const headers = [["NOMBRE", "PROFESIÓN"]];

    const data = people.map((elt) => [elt.name, elt.profession]);

    let content = {
      startY: 50,
      head: headers,
      body: data,
    };

    doc.text(title, marginLeft, 40);
    doc.autoTable(content);
    doc.save("informe.pdf");
  };

  return (
    <div>
      <button onclick="{()" ==""> exportPDF()}>Generar Informe</button>
    </div>
  );
};

export default App;
    1. En el método render del componente de clase, simplemente devuelve el código JSX directamente en lugar de envolverlo en un método render:
    const App = () => {
  // código aquí
};

export default App;

    Siguiendo los pasos anteriores, has convertido con éxito el componente de clase en un componente funcional en React.

Comments are closed.