0
139
ViewsConvierta el código en componente de función en componente de clase
Tengo este código de reacción js y estoy tratando de convertir el siguiente código en un componente de clase
No sé cómo hacerlo. Si alguien puede crear un entorno limitado que funcione, será útil.
import React, { useEffect, useState } from "react"; import "./styles.css"; const data = [ { id: "1", name: "Jane", lastName: "Doe", age: "25" }, { id: "2", name: "James", lastName: "Doe", age: "40" }, { id: "3", name: "Alexa", lastName: "Doe", age: "27" }, { id: "4", name: "Jane", lastName: "Brown", age: "40" } ]; export default function App() { const [peopleInfo, setPeopleInfo] = useState({}); const toggleHandler = (item) => () => { setPeopleInfo((state) => ({ ...state, [item.id]: state[item.id] ? null : { id: item.id, first: item.name, last: item.lastName, age: item.age } })); }; useEffect(() => { console.log(peopleInfo); }, [peopleInfo]); return ( <div className="App"> <table> <tr> {data.map((item) => { return ( <div key={item.id} style={{ display: "flex", width: "150px" }} > <input onChange={toggleHandler(item)} checked={peopleInfo[item.id]} style={{ margin: "20px" }} type="checkbox" /> <td style={{ margin: "20px" }}>{item.name}</td> <td style={{ margin: "20px" }}>{item.lastName}</td> <td style={{ margin: "20px" }}>{item.age}</td> </div> ); })} </tr> </table> </div> ); }Tengo este código de reacción js y estoy tratando de convertir el siguiente código en un componente de clase
No sé cómo hacerlo. Si alguien puede crear un entorno limitado que funcione, será útil. Tengo este código de reacción js y estoy tratando de convertir el siguiente código en un componente de clase.
No sé cómo hacerlo. Si alguien puede crear un entorno limitado que funcione, será útil.
2 answers
Answer question0
El método de ciclo de vida
componentDidUpdatecorresponde al ganchouseEffect.El método de
renderdebe devolver el JSX que se representará desde el componente de clase.El método
this.setStateestá disponible al extender la claseComponent(desde el encadenamiento de prototipos).
Este será el componente de clase correspondiente.
import React, { Component } from "react"; const data = [ { id: "1", name: "Jane", lastName: "Doe", age: "25" }, { id: "2", name: "James", lastName: "Doe", age: "40" }, { id: "3", name: "Alexa", lastName: "Doe", age: "27" }, { id: "4", name: "Jane", lastName: "Brown", age: "40" } ]; export default class App extends Component { state = {}; toggleHandler = (item) => () => { this.setState((state) => ({ ...state, [item.id]: state[item.id] ? null : { id: item.id, first: item.name, last: item.lastName, age: item.age } })); }; componentDidUpdate() { console.log(this.state); } render() { return ( <div className="App"> <table> <tr> {data.map((item) => { return ( <div key={item.id} style={{ display: "flex", width: "150px" }} > <input onChange={this.toggleHandler(item)} checked={this.state[item.id]} style={{ margin: "20px" }} type="checkbox" /> <td style={{ margin: "20px" }}>{item.name}</td> <td style={{ margin: "20px" }}>{item.lastName}</td> <td style={{ margin: "20px" }}>{item.age}</td> </div> ); })} </tr> </table> </div> ); } } 
0
Se llamará a ComponentDidUpdate cuando cada uno se vuelva a renderizar con la actualización de estado.
import "./styles.css"; import React from "react"; const data = [ { id: "1", name: "Jane", lastName: "Doe", age: "25" }, { id: "2", name: "James", lastName: "Doe", age: "40" }, { id: "3", name: "Alexa", lastName: "Doe", age: "27" }, { id: "4", name: "Jane", lastName: "Brown", age: "40" } ]; export default class App extends React.Component { state = { peopleInfo: {} }; toggleHandler(item) { this.setState({ peopleInfo: { ...this.state.peopleInfo, [item.id]: this.state.peopleInfo[item.id] ? null : { id: item.id, first: item.name, last: item.lastName, age: item.age } } }); } componentDidUpdate() { console.log(this.state.peopleInfo); } render() { return ( <div className="App"> <table> <tr> {data.map((item) => { return ( <div key={item.id} style={{ display: "flex", width: "150px" }} > <input onChange={() => this.toggleHandler(item)} checked={this.state.peopleInfo[item.id]} style={{ margin: "20px" }} type="checkbox" /> <td style={{ margin: "20px" }}>{item.name}</td> <td style={{ margin: "20px" }}>{item.lastName}</td> <td style={{ margin: "20px" }}>{item.age}</td> </div> ); })} </tr> </table> </div> ); } }