PricingLoginStart free
React Academy · Lezione

Slot denominati tramite props oggetto

Implementare slot header/body/footer passando JSX tramite props denominati.

Lezione 3 di 413 passaggi

Slot denominati tramite props oggetto è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 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 implementerà slot denominati flessibili passando JSX attraverso prop denominate, così da creare componenti di layout con aree header, body e footer senza una struttura rigida basata sui children.

Il limite di children

Una singola prop `children` è sufficiente per un'area. Quando un componente necessita di più aree di contenuto indipendenti, come una card con header e footer, la soluzione più pulita consiste nell'usare prop denominate che contengono JSX.

Slot tramite prop denominate

Definisca una prop per ogni slot nell'interfaccia del componente. Il componente padre passa JSX a ciascuna prop. Il componente esegue il rendering di ogni slot nella posizione corretta.
function Card({ header, body, footer }) {
  return (
    <div className="card">
      <div className="card-header">{header}</div>
      <div className="card-body">{body}</div>
      <div className="card-footer">{footer}</div>
    </div>
  );
}

// Usage
<Card
  header={<h2>Title</h2>}
  body={<p>Content here</p>}
  footer={<button>OK</button>}
/>

Slot opzionali

Renda gli slot opzionali eseguendo il rendering solo quando la prop contiene un valore. In questo modo lo stesso componente può funzionare, ad esempio, con o senza un footer.
function Card({ header, children, footer }) {
  return (
    <div>
      {header && <div className="header">{header}</div>}
      <div className="body">{children}</div>
      {footer && <div className="footer">{footer}</div>}
    </div>
  );
}

Combinare children e slot denominati

Usi `children` per l'area di contenuto principale e prop denominate per le aree secondarie. Questo segue il principio secondo cui il caso d'uso più comune dovrebbe essere quello più semplice da utilizzare.
<Dialog
  title="Confirm"
  actions={<><button>Cancel</button><button>OK</button></>}
>
  <p>Are you sure?</p>  {/* children = primary slot */}
</Dialog>

TypeScript: tipizzare gli slot denominati

Tipizzi le prop degli slot denominati come `React.ReactNode` per accettare qualsiasi contenuto JSX.
interface CardProps {
  header?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

Slot denominati e compound component

Le prop denominate sono semplici ed esplicite. I compound component, come ``, sono più pratici per famiglie di componenti complesse, ma richiedono una configurazione maggiore con Context. Inizi con le prop denominate e passi a un'altra soluzione se necessario.

Passare componenti come slot

Può anche tipizzare uno slot come componente React, anziché come JSX. Il componente padre passa un riferimento al componente e il layout lo esegue. In questo modo il layout controlla quando e quante volte eseguire il rendering dello slot.
function Timeline({ renderItem, items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

<Timeline
  items={data}
  renderItem={item => <EventCard event={item} />}
/>

Composizione del layout con slot denominati

I componenti di layout delle pagine usano ampiamente gli slot denominati. Un componente shell di pagina con gli slot `sidebar`, `toolbar` e `content` consente a pagine diverse di comporre la stessa shell con contenuti completamente diversi in ciascuna area.

Documentare gli slot denominati

Gli slot denominati si documentano autonomamente tramite interfacce TypeScript o PropTypes. I consumer possono vedere esattamente quali slot sono disponibili e quali sono opzionali, riducendo la necessità di documentazione esterna.

Verifica rapida

Quale tipo TypeScript deve usare per una prop di slot denominato che accetta qualsiasi JSX?
Rispondi nella lezione interattiva

Riepilogo

Le prop degli slot denominati rendono i componenti di layout flessibili e autoesplicativi. Usi children per l'area principale, prop denominate per le aree secondarie e le tipizzi come React.ReactNode.

Prossimo argomento

Prossima lezione: **Clonare e iniettare prop con cloneElement** — utilizzerà React.cloneElement per passare prop implicite dal componente padre ai suoi children.
Gratis per iniziare

Impara React con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi
88
Lezioni
324
Inizia a imparare gratisVisualizza il corso completo

Domande Frequenti

La lezione «Slot denominati tramite props oggetto» è gratuita?

Sì — il testo completo di «Slot denominati tramite props oggetto» è 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 «Slot denominati tramite props oggetto»?

Implementare slot header/body/footer passando JSX tramite props denominati. 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 3 di 4.

Quanto tempo richiede la lezione «Slot denominati tramite props oggetto»?

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

  1. Fondamenti di props.children
  2. Utility React.Children
  3. Slot denominati tramite props oggetto
  4. Clonazione e iniezione di props con cloneElement
← Torna a React Academy