Prop children

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 20 z 42.

Jeden prop jest wyjątkowy. Napisz komponent z tagiem otwierającym ORAZ zamykającym, a wszystko, co umieścisz między nimi, zostanie przekazane jako prop children:

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

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

Karta nie wie ani nie obchodzi jej, co znajduje się w środku: po prostu umieszcza zawartość w stylizowanym polu. Komponenty opakowujące, takie jak karty, okna modalne i układy, wszystkie używają children: rodzic dostarcza zawartość, a komponent — ramę.

Wyzwanie

Średni

Zbuduj wielokrotnego użytku obramowanie karty.

Spraw, aby Card renderował element <div> z className="card", który wyświetla swoje children.
W App użyj <Card>...</Card>, aby opakować element <p> z id="card-text" i tekstem Welcome aboard.

Spróbuj swoich sił

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