¿Cuál es el propósito de usar superconstructor con argumento de accesorios en ReactJS?

React es una biblioteca de JavaScript gratuita y de código abierto para el diseño de UI. Representa los componentes escritos en JSX. Introduce el concepto de accesorios . Los accesorios se utilizan para pasar datos de los componentes principales a los componentes secundarios. Estos accesorios solo pueden ser actualizados por el componente principal. Es de solo lectura para componentes secundarios. Es posible que necesitemos accesorios dentro del constructor del componente secundario con esta palabra clave.  La función Super() llama al constructor de la clase principal. El uso de superconstructor con argumentos props básicamente permite acceder a this.props en una función Constructor.

Vamos a crear un proyecto React y luego crearemos una interfaz de usuario para mostrar el propósito anterior. Los usuarios podrán ver la aplicación del superconstructor con el argumento props.

Creando proyecto React:

Paso 1: Cree una aplicación de reacción escribiendo el siguiente comando en la terminal.

npx create-react-app project_name

Paso 2: Ahora, vaya a la carpeta del proyecto, es decir, project_name ejecutando el siguiente comando.

cd project_name

Estructura del proyecto: Tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo: Vamos a crear un superconstructor con argumento props. 

App.js

import React from "react";
  
class App extends React.Component {
   
  constructor(props){
    super(props);
    console.log("Empty props ", this.props);
  }
  
  render() {
    return (
      <div>
        <p>Hello World!</p>
      </div>
    );
  }
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Abra su navegador. De forma predeterminada, abrirá una pestaña con localhost ejecutándose. Como se muestra en la imagen, los accesorios se registran en la consola. Aquí los accesorios no tienen nada, por eso es un objeto vacío. 

este registro de accesorios 

Incluso puede consultar estos artículos de GFG para obtener más claridad:

Publicación traducida automáticamente

Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *