React Academy · Lezione

Clonazione e iniezione di props con cloneElement

Usare React.cloneElement per passare props nascosti dal componente padre ai componenti figli.

Clonazione e iniezione di props con cloneElement è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 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à React.cloneElement per clonare un elemento child e iniettare prop aggiuntive dal componente padre, senza che il child debba conoscerle.

Che cos'è cloneElement?

`React.cloneElement(element, props, ...children)` crea un nuovo elemento React a partire da uno esistente, unendo le nuove prop a quelle originali. Il tipo dell'elemento originale viene preservato.

const clone = React.cloneElement(child, { active: true });

Perché usare cloneElement?

Un componente padre può iniettare comportamento, come uno stato attivo o gestori di eventi, nei propri children senza che questi debbano conoscerlo. Questa tecnica viene usata nei sistemi di tab, negli accordion e nei gruppi di moduli.

Esempio di barra di tab

Un componente Tabs può clonare ogni child Tab e iniettare automaticamente le prop `isActive` e `onClick`, così il consumer non deve collegarle manualmente.

function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

Regole di unione delle prop

cloneElement unisce le nuove prop **sovrascrivendo** quelle originali. Se l'elemento originale ha già una prop con la stessa chiave, prevale il nuovo valore. style e className vengono sovrascritti, non uniti, a meno che non gestisca manualmente questa operazione.

Unire i gestori di eventi

Per unire i gestori di eventi invece di sovrascriverli, componga manualmente i callback prima di passarli a cloneElement.

React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

Sostituire i children

Il terzo argomento di `cloneElement` sostituisce i children dell'elemento. Passi un nuovo contenuto per sovrascrivere completamente i children originali.

// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

Verificare il tipo dell'elemento prima di clonarlo

Prima di clonare, verifichi che il child sia un elemento React valido e, facoltativamente, ne controlli il tipo per evitare di clonare children che non sono elementi, come testo, numeri o null.

if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement e Context

cloneElement è fragile perché richiede di conoscere la struttura del child. In genere si preferisce Context per passare dati impliciti attraverso molti livelli. Usi cloneElement solo per l'iniezione di prop tra un componente padre e i suoi children diretti.

Alternativa moderna: render prop e hook

In molti casi in cui in passato si usava cloneElement, un hook personalizzato o una render prop è una soluzione più pulita. Valuti cloneElement quando controlla realmente sia il componente padre sia i children diretti.

Verifica rapida

Che cosa accade a una prop presente sia nell'elemento originale sia nell'oggetto props passato a React.cloneElement?

Riepilogo

React.cloneElement clona un elemento e inietta nuove prop. Lo utilizzi per l'iniezione implicita di prop dal componente padre al child nei compound component. Preferisca Context o le render prop quando la gerarchia è più profonda.

Corso completato

Congratulazioni! Ha completato **API React Children e pattern degli slot**. Ora conosce a fondo props.children, le utility React.Children, le prop degli slot denominati e cloneElement per creare componenti di layout flessibili.

Domande Frequenti

La lezione «Clonazione e iniezione di props con cloneElement» è gratuita?

Sì — il testo completo di «Clonazione e iniezione di props con cloneElement» è 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 «Clonazione e iniezione di props con cloneElement»?

Usare React.cloneElement per passare props nascosti dal componente padre ai componenti figli. 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 4 di 4.

Quanto tempo richiede la lezione «Clonazione e iniezione di props con cloneElement»?

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