React Academy · Lezione

Utility React.Children

Usare React.Children.map, count e toArray per manipolare i children in sicurezza.

Utility React.Children è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 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 utilizzerà le utility React.Children — map, count, toArray e forEach — per iterare e trasformare in sicurezza i children, indipendentemente dal loro numero.

Il problema dei metodi diretti degli array

Poiché `props.children` può essere un singolo elemento, un array oppure undefined, chiamare direttamente `.map()` su di esso causerà un errore. Le utility React.Children gestiscono tutti questi casi in sicurezza.

// Unsafe — crashes if children is a single element
children.map(c => ...);

// Safe
React.Children.map(children, c => ...);

React.Children.map

Funziona come `Array.prototype.map`, ma gestisce in sicurezza un child singolo, più children e null/undefined. Restituisce un array di elementi clonati (o qualunque valore restituisca il callback).

function List({ children }) {
  return (
    <ul>
      {React.Children.map(children, (child, i) => (
        <li key={i}>{child}</li>
      ))}
    </ul>
  );
}

React.Children.count

`React.Children.count(children)` restituisce il numero di children, contando correttamente gli elementi singoli come 1 e null/undefined come 0.

function RequiresTwo({ children }) {
  if (React.Children.count(children) !== 2) {
    throw new Error('Exactly two children required');
  }
  return <div>{children}</div>;
}

React.Children.toArray

Converte i children in un array piatto con chiavi stabili. In questo modo può ordinare, filtrare o suddividere i children usando i normali metodi degli array, senza preoccuparsi dell'annidamento.

function Reversed({ children }) {
  const arr = React.Children.toArray(children);
  return <>{arr.reverse()}</>;
}

React.Children.forEach

È simile a `.map()`, ma non restituisce alcun valore. Lo utilizzi quando vuole iterare sui children per eseguire effetti collaterali, ad esempio per convalidarne i tipi o creare una struttura di ricerca.

React.Children.forEach(children, child => {
  if (!React.isValidElement(child)) {
    console.warn('Non-element child found');
  }
});

React.Children.only

`React.Children.only(children)` verifica che ci sia esattamente un elemento child e lo restituisce. Genera un errore se non ci sono children o se ce n'è più di uno. È utile per imporre API con un solo child.

function SingleChild({ children }) {
  const child = React.Children.only(children);
  return React.cloneElement(child, { 'data-wrapped': true });
}

Convalidare i tipi dei children

Combini `React.Children.forEach` e `React.isValidElement` con il tipo del child per imporre che come children vengano passati solo determinati tipi di componenti.

React.Children.forEach(children, child => {
  if (child.type !== TabPanel) {
    throw new Error('Only TabPanel children allowed');
  }
});

React.Children e Array.from

In React 18 e versioni successive, i children possono essere un albero di elementi React che non è un semplice array. Preferisca sempre React.Children ad Array.from per evitare casi limite con elementi singoli e Fragment.

Alternativa moderna: appiattire con toArray

Se deve eseguire trasformazioni complesse, chiami prima `React.Children.toArray(children)` per ottenere un array piatto con chiavi, quindi applichi i normali metodi degli array.

const items = React.Children.toArray(children);
const first = items[0];
const rest = items.slice(1);

Verifica rapida

Quale metodo React.Children gestisce in sicurezza un elemento singolo, un array e children null/undefined, come Array.map ma in modo robusto?

Riepilogo

Usi React.Children.map per iterare in sicurezza, count per verificare la quantità, toArray per usare i metodi degli array, forEach per iterare eseguendo effetti collaterali e only per verificare che ci sia esattamente un child.

Prossimo argomento

Prossima lezione: **Slot denominati tramite prop oggetto** — implementerà gli slot header, body e footer passando JSX attraverso prop denominate.

Domande Frequenti

La lezione «Utility React.Children» è gratuita?

Sì — il testo completo di «Utility React.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 «Utility React.Children»?

Usare React.Children.map, count e toArray per manipolare i children in sicurezza. 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 2 di 4.

Quanto tempo richiede la lezione «Utility React.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