Zugriff auf Props in funktionalen Komponenten

In React, sind Props (kurz für Properties) die Werte, die an eine Komponente übergeben werden. Sie ähneln den Parametern einer Funktion in anderen Programmiersprachen. Bei der Arbeit mit funktionalen Komponenten in React gibt es eine spezifische Syntax, die verwendet wird, um auf diese Props zuzugreifen.

In dem Quiz-Beispiel wird gefragt, wie man auf eine Prop namens 'username' in einer funktionalen Komponente zugreift. Die korrekte Antwort ist props.username.

Hier ist ein einfaches Beispiel, wie das aussieht:

const MyComponent = (props) => {
  return <h1>Hallo {props.username}!</h1>
};

In diesem Beispiel würde React die username Prop in den Text des h1-Elements einfügen. Wenn wir beispielsweise unsere Komponente so verwenden würden: <MyComponent username="Max"/>, würde der ausgegebene Text "Hallo Max!" sein.

Es ist wichtig zu bemerken, dass die Proposition this.props.username unzutreffend ist. In funktionalen Komponenten wird kein this verwendet, um auf Props zuzugreifen. Das this-Keyword wird in Klassenkomponenten verwendet, ist jedoch in funktionalen Komponenten nicht definiert.

Darüber hinaus sollte man vermeiden ein MyComponent.username oder einfach username zu bereitstellen, da diese beide Varianten von React nicht erkannt werden würden.

Für eine einfachere Syntax könnten Sie auch die Dekonstruktionseigenschaft von JavaScript verwenden, um Props aufzulösen:

const MyComponent = ({ username }) => {
  return <h1>Hallo {username}!</h1>
};

In diesem Fall genau das gleiche Ergebnis erreicht. Die Dekonstruktion arbeitet, indem sie direkt die gewünschten Properties aus dem props-Objekt beim Empfangen extrahiert.

Um den Umgang mit props in React effektiv zu gestalten, ist es wichtig, das Verschachteln von Komponenten und das Weitergeben von props zwischen ihnen zu verstehen. Die Verwendung von props erlaubt eine hohe Wiederverwendbarkeit von Komponenten und fördert saubere und wartbare Codepraktiken.