React Academy · Lektion

Kloning og indsættelse af props med cloneElement

Brug React.cloneElement til at sende skjulte props fra parent til child-komponenter.

Lektion 4 af 413 trin

Kloning og indsættelse af props med cloneElement er en gratis React Academy-lektion på CoddyKit. Dette er lektion 4 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 bruge React.cloneElement til at klone et children-element og indsætte ekstra props fra forælderen, uden at children-elementet behøver kende til dem.

Hvad er cloneElement?

`React.cloneElement(element, props, ...children)` opretter et nyt React-element baseret på et eksisterende element og sammenfletter de nye props med de oprindelige props. Det oprindelige elements type bevares.

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

Hvorfor bruge cloneElement?

En forælderkomponent kan indsætte adfærd, f.eks. aktiv tilstand eller hændelseshandlere, i sine children uden at children-elementerne kender til det. Det bruges i tabsystemer, harmonikaer og formulargrupper.

Eksempel på en tabbjælke

En Tabs-komponent kan klone hvert Tab-children-element og automatisk indsætte props som `isActive` og `onClick`, så brugeren ikke behøver forbinde dem manuelt.

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>
  );
}

Regler for sammenfletning af props

cloneElement sammenfletter de nye props **oven på** de oprindelige props. Hvis det oprindelige element allerede har en prop med samme nøgle, vinder den nye værdi. style og className overskrives, de sammenflettes ikke, medmindre du selv håndterer det.

Sammenfletning af hændelseshandlere

Hvis du vil sammenflette hændelseshandlere i stedet for at overskrive dem, skal du manuelt sammensætte tilbagekaldsfunktionerne, før du sender dem til cloneElement.

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

Udskiftning af children

Det tredje argument til `cloneElement` udskifter elementets children. Send nyt indhold for helt at tilsidesætte de oprindelige children.

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

Kontrol af elementtypen før kloning

Før du kloner, skal du kontrollere, at children er et gyldigt React-element, og eventuelt tjekke typen for at undgå at klone children, der ikke er elementer, f.eks. tekst, tal eller null.

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

cloneElement kontra Context

cloneElement er skrøbelig, fordi det kræver kendskab til children-elementets struktur. Context foretrækkes generelt til at sende implicitte data gennem mange niveauer. Brug kun cloneElement til direkte indsættelse af props fra forælder til child.

Moderne alternativ: render props og hooks

I mange tilfælde, hvor cloneElement tidligere blev brugt, er en brugerdefineret hook eller render prop mere enkel. Overvej cloneElement, når du virkelig ejer både forælderen og de direkte children.

Hurtigt tjek

Hvad sker der med en prop, som findes både på det oprindelige element og i det props-objekt, der sendes til React.cloneElement?

Besvar den i den interaktive lektion

Opsummering

React.cloneElement kloner et element og indsætter nye props. Brug det til implicit indsættelse af props fra forælder til child i sammensatte komponenter. Foretræk Context eller render props, når hierarkiet er dybere.

Kursus gennemført

Tillykke! Du har gennemført **React Children-API og slotmønsteret**. Du behersker nu props.children, React.Children-hjælpefunktioner, navngivne slot-props og cloneElement til at bygge fleksible layoutkomponenter.

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 gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Kloning og indsættelse af props med cloneElement” gratis?

Ja — hele teksten til “Kloning og indsættelse af props med cloneElement” 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 “Kloning og indsættelse af props med cloneElement”?

Brug React.cloneElement til at sende skjulte props fra parent til child-komponenter. 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 4 af 4.

Hvor lang tid tager lektionen “Kloning og indsættelse af props med cloneElement”?

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

Grundlæggende om props.children
React.Children-værktøjer
Navngivne slots via object props
Kloning og indsættelse af props med cloneElement

← Tilbage til React Academy