React: Up & Running, 2. Auflage

Kapitel 2. Das Leben eines Bauteils

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Jetzt, wo du weißt, wie du die vorgefertigten DOM-Komponenten verwenden kannst, ist es an der Zeit zu lernen, wie du selbst welche erstellen kannst.

Es gibt zwei Möglichkeiten, eine benutzerdefinierte Komponente zu definieren, die beide das gleiche Ergebnis erzielen, aber eine unterschiedliche Syntax verwenden:

• Verwendung einer Funktion (Komponenten, die auf diese Weise erstellt werden, werden als Funktionskomponenten bezeichnet)

• Verwendung einer Klasse, die React.Component erweitert (gemeinhin als Klassenkomponenten bezeichnet)

Eine benutzerdefinierte Funktionskomponente

Hier ist ein Beispiel für eine Funktionskomponente:

const MyComponent = function() {
  return 'I am so custom';
};

Aber warte, das ist doch nur eine Funktion! Ja, die benutzerdefinierte Komponente ist nur eine Funktion, die die von dir gewünschte Benutzeroberfläche zurückgibt. In diesem Fall besteht die Benutzeroberfläche nur aus Text, aber oft brauchst du etwas mehr, wahrscheinlich eine Zusammensetzung aus anderen Komponenten. Hier ist ein Beispiel für die Verwendung von span, um den Text einzuhüllen:

const MyComponent = function() {
  return React.createElement('span', null, 'I am so custom');
};

Die Verwendung deiner neuen Komponente in einer Anwendung ist ähnlich wie die Verwendung der DOM-Komponenten aus Kapitel 1, nur dass du die Funktion ...