La prop children
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 20 di 42.
Una prop è speciale. Scrivi un componente con un tag di apertura E uno di chiusura, e tutto ciò che inserisci tra i due arriva come prop children:
function Card({ children }) {
return <div className="card">{children}</div>;
}
<Card>
<p>Any content!</p>
</Card>La Card non sa né le importa cosa ci sia dentro: si limita a racchiuderlo in un riquadro stilizzato. Wrapper come card, modali e layout usano tutti children: il genitore fornisce il contenuto, il componente fornisce la cornice.
Sfida
MedioCrea una cornice riutilizzabile per una scheda.
- Fai in modo che
Cardvisualizzi un<div>conclassName="card"che mostri i suoichildren. - In App, usa
<Card>...</Card>per racchiudere un<p>conid="card-text"e il testoWelcome aboard.
Provalo tu
<!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>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX