PricingLoginStart free
React Academy · Lektion

Navngivne slots via object props

Implementér header-, body- og footer-slots ved at sende JSX gennem navngivne props.

Lektion 3 af 413 trin

Navngivne slots via object props er en gratis React Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion skal du implementere fleksible navngivne slots ved at sende JSX gennem navngivne props. Det gør det muligt at bygge layoutkomponenter med områder til sidehoved, indhold og sidefod uden en fast children-struktur.

Begrænsningen ved children

Én children-prop fungerer til ét område. Når en komponent har brug for flere uafhængige indholdsområder, f.eks. et kort med et sidehoved og en sidefod, er navngivne props med JSX den rene løsning.

Navngivne prop-slots

Definer en prop for hvert slot i komponentens grænseflade. Forælderen sender JSX til hver prop. Komponenten renderer hvert slot på den rigtige placering.
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>}
/>

Valgfrie slots

Gør slots valgfrie ved kun at rendere dem, når proppen har en sandhedsværdi. På den måde kan den samme komponent f.eks. bruges både med og uden en sidefod.
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>
  );
}

Kombination af children og navngivne slots

Brug `children` til det primære indholdsområde og navngivne props til de sekundære områder. Det følger princippet om, at den mest almindelige anvendelse skal være den nemmeste at bruge.
<Dialog
  title="Confirm"
  actions={<><button>Cancel</button><button>OK</button></>}
>
  <p>Are you sure?</p>  {/* children = primary slot */}
</Dialog>

TypeScript: Typning af navngivne slots

Angiv typen for navngivne slot-props som `React.ReactNode`, så de accepterer alt JSX-indhold.
interface CardProps {
  header?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

Navngivne slots kontra sammensatte komponenter

Navngivne props er enkle og eksplicitte. Sammensatte komponenter som `` er nemmere at bruge i komplekse komponentfamilier, men kræver mere opsætning med Context. Start med navngivne props, og skift, hvis det bliver nødvendigt.

Sende komponenter som slots

Du kan også angive typen for et slot som en React-komponent, ikke JSX. Forælderen sender en komponentreference, og layoutet renderer den. Det giver layoutet kontrol over, hvornår og hvor mange gange slottet skal renderes.
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} />}
/>

Layoutsammensætning med navngivne slots

Sidelayoutkomponenter bruger navngivne slots i stor udstrækning. En sideskalskomponent med slots til `sidebar`, `toolbar` og `content` lader forskellige sider sammensætte den samme skal med helt forskelligt indhold i hvert område.

Dokumentation af navngivne slots

Navngivne slots er selvdokumenterende gennem TypeScript-grænseflader eller PropTypes. Brugere kan se præcis, hvilke slots der er tilgængelige, og hvilke der er valgfrie, så behovet for ekstern dokumentation reduceres.

Hurtigt tjek

Hvilken TypeScript-type skal du bruge til en navngiven slot-prop, der accepterer al JSX?
Besvar den i den interaktive lektion

Opsummering

Navngivne slot-props gør layoutkomponenter fleksible og selvdokumenterende. Brug children til hovedområdet, navngivne props til de sekundære områder, og angiv deres type som React.ReactNode.

Det næste

Næste lektion: **Kloning og indsættelse af props med cloneElement** – du skal bruge React.cloneElement til at sende skjulte props fra en forælder til dens children.
Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Navngivne slots via object props” gratis?

Ja — hele teksten til “Navngivne slots via object props” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Navngivne slots via object props”?

Implementér header-, body- og footer-slots ved at sende JSX gennem navngivne props. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Navngivne slots via object props”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Grundlæggende om props.children
  2. React.Children-værktøjer
  3. Navngivne slots via object props
  4. Kloning og indsættelse af props med cloneElement
← Tilbage til React Academy