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ß nicht und kümmert sich nicht darum, was sich darin befindet: Sie verpackt es einfach in eine gestaltete Box. Wrapper wie Cards, Modals und Layouts verwenden alle children: Das übergeordnete Element liefert den Inhalt, die Komponente liefert den Rahmen.

Aufgabe

Mittel

Erstelle einen wiederverwendbaren Kartenrahmen.

Lass 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>