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>