Erweitert in React JS

Vererbung ist ein wesentliches Konzept für objektorientierte Architektur. In React JS verwenden wir hauptsächlich Vererbung, um Zugriff auf React.Component zu erhalten, um die Benutzeroberfläche zu erstellen.

Zum Beispiel verwenden wir meistens Klasse ClassA erweitert React.Component, was bedeutet, dass die ClassA Zugriff auf die Elemente von React.Component hat.

Dieser Artikel behandelt das Schlüsselwort extends in React JS. Wir werden uns auch ein Beispiel mit einer Erklärung ansehen, um das Thema zu vereinfachen.

Verwenden Sie das Schlüsselwort extends in React JS

In unserem Beispiel unten werden wir ein einfaches Beispiel zur Vererbung in React JS diskutieren. Sehen Sie sich zunächst den folgenden Beispielcode an.

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;

Im obigen Beispiel wird das Schlüsselwort extends verwendet, um auf die Komponenten von React.Component zuzugreifen.

Für die Referenz von Klasse zu Klasse verwenden wir die folgende allgemeine Syntax:

<ClassName />

Dadurch wird auf den Standardexport der Klasse zugegriffen. Wenn Sie mehr Elemente in der Klasse haben, können Sie sie wie folgt importieren:

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

Und dann können Sie wie unten gezeigt einfach darauf zugreifen:

<element1 />

Nachdem Sie nun mit allen Dateien fertig sind, erhalten Sie die folgende Ausgabe in Ihrem Browser.

Sehen wir uns ein weiteres Beispiel zur Vererbung von React-Komponenten an. Hier veranschaulichen wir, wie wir Komponenten direkt aus einer anderen Klasse erweitern können.

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;
  }
}

Das obige Beispiel hat gezeigt, wie die Komponenten einer anderen Klasse in React JS erweitert werden.

In der obigen Funktion haben wir eine Klasse namens Class_Parent mit einer Funktion Parent_Class_Function() erstellt. Danach haben wir eine weitere Klasse generiert, die den Class_Parent um die folgende Zeile erweitert:

export default class Class_Child extends Class_Parent

Jetzt können wir einfach auf die übergeordnete Funktion Parent_Class_Function() zugreifen.

Wenn Sie nun das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe in Ihrer Webkonsole:

This is a parent class method.

Dieses Tutorial verwendet das Paket react-select, daher müssen Sie dieses Paket installieren, bevor Sie die Anwendung ausführen. Diese können Sie ganz einfach mit npm installieren.

Die in diesem Artikel geteilten Beispielcodes wurden im React JS-Projekt geschrieben. Um ein React-Projekt auszuführen, muss die neueste Version von Node JS auf Ihrem System installiert sein.

Wenn Ihr System kein Node JS enthält, installieren Sie es zuerst.