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 /
  • Cómo reescribir un componente de clase con componentWillReceiveProps en un componente funcional.

Cómo reescribir un componente de clase con componentWillReceiveProps en un componente funcional.

17 Jun, 2023 Programación

Estoy intentando refactorizar este componente React a un componente funcional pero no estoy muy seguro de cómo manejar la parte de componentWillReceiveProps. He buscado algunas guías y preguntas anteriores, pero no encuentro nada específico sobre este aspecto.

import React from "react";

function Thumbnail(props) {
  const [state, setState] = React.useState({
    loading: false,
    thumb: undefined,
  });

  React.useEffect(() => {
    if (!props.file) {
      return;
    }

    setState({ loading: true }, () => {
      let reader = new FileReader();

      reader.onloadend = () => {
        setState({ loading: false, thumb: reader.result });
      };

      reader.readAsDataURL(props.file);
    });
  }, [props.file]);

  const { file } = props;
  const { loading, thumb } = state;

  if (!file) {
    return null;
  }

  if (loading) {
    return <p>loading...</p>;
  }

  return(
    <img src="{thumb}" alt="{file.name}" classname="img-thumbnail mt-2" height="{200}" width="{200}">
  );
}

export default Thumbnail;
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para convertir el componente React Thumbnail en un componente funcional, se puede hacer uso de los ganchos useEffect y useState que proporciona React.

    import React, { useState, useEffect } from "react";

function Thumbnail(props) {
  const [loading, setLoading] = useState(false);
  const [thumb, setThumb] = useState(undefined);

  useEffect(() => {
    if (!props.file) {
      return;
    }

    setLoading(true);
    let reader = new FileReader();

    reader.onloadend = () => {
      setLoading(false);
      setThumb(reader.result);
    };

    reader.readAsDataURL(props.file);
  }, [props.file]);

  if (!props.file) {
    return null;
  }

  if (loading) {
    return <p>cargando...</p>;
  }

  return (
    <img src="{thumb}" alt="{props.file.name}" classname="img-thumbnail mt-2" height="{200}" width="{200}">
  );
}

    El gancho useEffect se utiliza para realizar efectos secundarios, como obtener datos, manipular el DOM, etc. en componentes funcionales. Toma una función de devolución de llamada como primer argumento, que se ejecuta después de que se monta y actualiza el componente. Se puede agregar un segundo argumento a este gancho, una matriz de dependencias para controlar cuándo ejecutar el efecto. En este caso, el efecto se ejecuta solo cuando la propiedad file cambia.

    El gancho useState se utiliza para administrar el estado en componentes funcionales. Devuelve una matriz con dos elementos, el valor de estado actual y una función para actualizarlo. En este caso, loading y thumb son las variables de estado, y setLoading y setThumb son sus correspondientes funciones para establecer el estado.

    En general, esta implementación es similar al componente de clase original, pero con algunas diferencias debido a las limitaciones impuestas por los componentes funcionales.

Comments are closed.