Se extiende en React JS

La herencia es un concepto esencial para la arquitectura orientada a objetos. En React JS, usamos principalmente la herencia para obtener acceso a React.Component para construir la interfaz de usuario.

Por ejemplo, usamos principalmente class ClassA extends React.Component, lo que significa que ClassA tiene acceso a los elementos de React.Component.

Este artículo discutirá la palabra clave extiende en React JS. También veremos un ejemplo con una explicación para facilitar el tema.

Use la palabra clave extiende en React JS

En nuestro ejemplo a continuación, discutiremos un ejemplo simple sobre la herencia en React JS. Primero, eche un vistazo al siguiente código de ejemplo.

import React from 'react';

class ClassA extends React.Component {
  render() {
    return <h2>I am from ClassA<
               /h2>;
  }
}

class ClassB extends React.Component {
  render() {
    return (
      <div>
      <h1>I am from ClassB</h1>
        <ClassA />< /div>
    );
  }
}
  export default ClassB;

En el ejemplo anterior, la palabra clave extiende se utiliza para acceder a los componentes de React.Component.

Para la referencia de clase a clase, usamos la siguiente sintaxis general:

<ClassName />

Esto accederá a la exportación predeterminada de la clase. Si tiene más elementos dentro de la clase, puede importarlos de la siguiente manera:

import {element1, element2, ...} from './YourClass';

Y luego puede acceder fácilmente a ellos como se muestra a continuación:

<element1 />

Ahora, una vez que haya terminado con todos los archivos, obtendrá el siguiente resultado en su navegador,

Veamos otro ejemplo con respecto a la herencia de los componentes de React. Aquí ilustramos cómo podemos extender componentes directamente desde otra clase.

import React from 'react';

class Class_Parent extends React.Component {
  constructor(props) {
    super(props);
    this.Parent_Class_Function = this.Parent_Class_Function.bind(this);
  }

  // Function of Parent Class.
  Parent_Class_Function() {
    console.log('This is a parent class method.');
  }

  render() {
    return false;
  }
}

export default class Class_Child extends Class_Parent {
  constructor() {
    super();
  }
  render() {
    this.Parent_Class_Function();
    return false;
  }
}

El ejemplo anterior demostró cómo extender los componentes de otra clase en React JS.

En la función anterior, creamos una clase llamada Class_Parent con una función Parent_Class_Function(). Luego de eso, generamos otra clase que extiende el Class_Parent a través de la siguiente línea:

export default class Class_Child extends Class_Parent

Ahora podemos acceder fácilmente a la función principal Parent_Class_Function().

Ahora, cuando ejecute el ejemplo anterior, obtendrá el siguiente resultado en su consola web:

This is a parent class method.

Este tutorial utiliza el paquete react-select, por lo que debe instalar este paquete antes de ejecutar la aplicación. Puede instalarlo fácilmente usando npm.

Los códigos de ejemplo compartidos en este artículo están escritos en el proyecto React JS. Para ejecutar un proyecto de React, debe tener instalada la última versión de Node JS en su sistema.

Si su sistema no contiene Node JS, instálelo primero.