Die Children-Prop

Teil des Abschnitts Grundlagen der React-Journey von Coddy. Lektion 20 von 42.

Eine Prop ist besonders. Schreiben Sie eine Komponente mit einem öffnenden UND einem schließenden Tag, und was immer Sie dazwischen verschachteln, kommt als die children-Prop an:

function Card({ children }) {
    return <div className="card">{children}</div>;
}

<Card>
    <p>Any content!</p>
</Card>

Die Card weiß oder kümmert sich nicht darum, was sich darin befindet: Sie hüllt es einfach in eine gestylte Box. Wrapper wie Cards, Modals und Layouts verwenden alle children: Das Elternteil liefert den Inhalt, die Komponente liefert den Rahmen.

Aufgabe

Mittel

Erstelle einen wiederverwendbaren Card-Rahmen.

Lasse Card ein <div> mit className="card" rendern, das seine children anzeigt.
Verwende in App <Card>...</Card>, um ein <p> mit id="card-text" und dem Text Welcome aboard zu umschließen.

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>