React Academy · Lektion

React.Children-værktøjer

Brug React.Children.map, count og toArray til sikkert at manipulere children.

Lektion 2 af 413 trin

React.Children-værktøjer er en gratis React Academy-lektion på CoddyKit. Dette er lektion 2 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 hjælpefunktionerne i React.Children – map, count, toArray og forEach – til sikkert at gennemløbe og transformere children uanset hvor mange, der sendes.

Problemet med direkte array-metoder

Fordi `props.children` kan være et enkelt element, et array eller undefined, vil et direkte kald til `.map()` få programmet til at gå ned. React.Children-hjælpefunktionerne håndterer alle disse tilfælde sikkert.

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

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

React.Children.map

Fungerer som `Array.prototype.map`, men håndterer sikkert ét children-element, flere children-elementer samt null og undefined. Returnerer et array med klonede elementer eller det, som tilbagekaldsfunktionen returnerer.

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

React.Children.count

`React.Children.count(children)` returnerer antallet af children og tæller korrekt enkeltstående elementer som 1 og null/undefined som 0.

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

React.Children.toArray

Konverterer children til et fladt array med stabile nøgler. Det gør det muligt at sortere, filtrere eller udtage et udsnit af children ved hjælp af normale array-metoder uden at bekymre sig om indlejring.

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

React.Children.forEach

Som `.map()`, men returnerer ikke en værdi. Brug den, når du vil gennemløbe children for at udføre bivirkninger, f.eks. validere deres typer eller opbygge et opslag.

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

React.Children.only

`React.Children.only(children)` sikrer, at der er præcis ét children-element, og returnerer det. Kaster en fejl, hvis der er nul eller flere end ét children-element. Det er nyttigt til API'er, der kræver ét children-element.

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

Validering af children-typer

Kombiner `React.Children.forEach` og `React.isValidElement` med typen for det pågældende element for at sikre, at kun bestemte komponenttyper sendes som children.

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

React.Children kontra Array.from

I React 18+ kan children være et React-elementtræ, der ikke er et almindeligt array. Foretræk altid React.Children frem for Array.from for at undgå særtilfælde med enkeltstående elementer og Fragmenter.

Moderne alternativ: Fladgør med toArray

Hvis du har brug for komplekse transformationer, skal du først kalde `React.Children.toArray(children)` for at få et fladt array med nøgler og derefter bruge almindelige array-metoder på det.

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

Hurtigt tjek

Hvilken React.Children-metode håndterer sikkert et enkelt element, et array og null/undefined som `Array.map`, men på en robust måde?

Besvar den i den interaktive lektion

Opsummering

Brug React.Children.map til sikker gennemløbning, count til at tjekke antallet, toArray til array-metoder, forEach til gennemløbning med bivirkninger og only til at sikre præcis ét children-element.

Det næste

Næste lektion: **Navngivne slots via objekt-props** – du skal implementere slots til sidehoved, indhold og sidefod ved at sende JSX gennem navngivne props.

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 “React.Children-værktøjer” gratis?

Ja — hele teksten til “React.Children-værktøjer” 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 “React.Children-værktøjer”?

Brug React.Children.map, count og toArray til sikkert at manipulere children. 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 2 af 4.

Hvor lang tid tager lektionen “React.Children-værktøjer”?

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