Props übergeben
Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 17 von 42.
Verbinden wir ein Prop von Anfang bis Ende. Drei Schritte, immer dieselben:
// 1. empfange es
function Greeting({ name }) {
// 2. verwende es
return <p>Hello, {name}!</p>;
}
// 3. übergebe es
<Greeting name="Ada" />Strings werden in Anführungszeichen übergeben. Zahlen und Ausdrücke verwenden geschweifte Klammern, dieselbe Regel wie bei Attributen:
<Score points={97} />
Aufgabe
AnfängerDie Component Greeting ignoriert alles, was du ihr übergibst.
- Lasse
Greetingeinename-Prop empfangen undHello, {name}!in ihrem Absatz rendern. - Übergib in App
name="Ada", sodass die SeiteHello, Ada!anzeigt.
Probier es selbst
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Grundlagen
1Lerne React kennen
Was ist React?Deine erste KomponenteDie Regel des einen Eltern-ElementsJSX ist nicht HTMLZusammenfassung: Lerne React kennen