React Academy · Lezione

Fondamenti di props.children

Passare JSX come children, renderizzare children singoli o multipli e gestirne il rendering condizionale.

Fondamenti di props.children è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione imparerà a passare JSX come children, a eseguire il rendering di children singoli o multipli e a eseguire il rendering condizionale dei children nei componenti React.

La prop children

Qualsiasi JSX inserito tra i tag di apertura e chiusura di un componente è automaticamente disponibile come `props.children`. È così che si creano componenti wrapper o di layout.

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

// Usage
<Card><p>Hello world</p></Card>

Children singoli e multipli

Quando passa un child singolo, `children` è un elemento React. Quando passa più children, `children` è un array. Il comportamento cambia in base al numero di children passati.

<Card>One child</Card>          // children is a string
<Card><p>A</p><p>B</p></Card>  // children is an array

Rendering diretto dei children

L'uso più semplice dei children consiste nell'eseguirne il rendering direttamente all'interno del JSX. Il componente padre controlla il layout e lo stile, mentre il consumer controlla il contenuto.

function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </section>
  );
}

Rendering condizionale dei children

Verifichi se sono stati passati dei children prima di eseguirne il rendering. Un componente può fornire un contenuto alternativo se non vengono forniti children.

function Panel({ children }) {
  if (!children) return <p>Nothing to show</p>;
  return <div className="panel">{children}</div>;
}

Children come render prop

I children possono anche essere una **function** (pattern della render prop). Il componente padre la chiama passandole dei dati, mentre il consumer controlla il rendering. È un pattern meno recente: oggi spesso viene sostituito dagli hook personalizzati.

function DataLoader({ children }) {
  const data = useFetchData();
  return children(data); // consumer receives data
}

<DataLoader>{data => <ul>{data.map(...)}</ul>}</DataLoader>

Passare i children come prop

Children non deve necessariamente utilizzare lo slot speciale `{children}`. Può passare JSX attraverso una prop con un nome qualsiasi. Questa è la base degli slot denominati.

function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

Children predefiniti

Può fornire children predefiniti usando la sintassi dei parametri predefiniti di JavaScript nel destructuring. Se il componente padre non passa nulla, viene mostrato il contenuto predefinito.

function Button({ children = 'Click me' }) {
  return <button>{children}</button>;
}

Fragment e children multipli

Per restituire più elementi senza un div contenitore, usi `React.Fragment` oppure la sintassi abbreviata `<>...`. È una soluzione pulita per i componenti di layout, in cui un nodo DOM aggiuntivo potrebbe compromettere il CSS.

function Row({ children }) {
  return <>{children}</>;
}

TypeScript: tipizzare i children

In TypeScript usi `React.ReactNode` per tipizzare i children: accetta elementi, stringhe, numeri, array, null e undefined.

interface Props {
  children: React.ReactNode;
}

function Box({ children }: Props) {
  return <div>{children}</div>;
}

Verifica rapida

Quando passa più elementi JSX tra i tag di un componente, di quale tipo è props.children?

Riepilogo

props.children contiene qualsiasi JSX passato tra i tag. I children singoli sono elementi, mentre i children multipli sono un array. Usi controlli condizionali per i children opzionali e prop denominate per gli slot denominati.

Prossimo argomento

Prossima lezione: **Utility React.Children** — utilizzerà React.Children.map, count e toArray per manipolare in sicurezza i children, indipendentemente dal loro tipo o numero.

Domande Frequenti

La lezione «Fondamenti di props.children» è gratuita?

Sì — il testo completo di «Fondamenti di props.children» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Fondamenti di props.children»?

Passare JSX come children, renderizzare children singoli o multipli e gestirne il rendering condizionale. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Fondamenti di props.children»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Fondamenti di props.children
Utility React.Children
Slot denominati tramite props oggetto
Clonazione e iniezione di props con cloneElement

← Torna a React Academy