Funktionelle komponenter og props
Opret komponenter som funktioner, modtag og destructurér props, og brug PropTypes eller TypeScript-typer til at dokumentere de forventede datastrukturer.
Funktionelle komponenter og props er en gratis Frontend 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 Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er en React-komponent
En React-komponent er en JavaScript-funktion, der returnerer JSX. Komponenter er byggestenene i React-applikationer — genbrugelige, komponerbare dele af brugergrænsefladen.
function Welcome() {
return <h1>Welcome to CoddyKit!</h1>;
}
// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;Props — videregivelse af data
Props (egenskaber) er måden, du sender data fra en forælder til et barn på. Komponenten modtager dem som sit første argument i form af et almindeligt objekt.
function Greeting({ name, role }: { name: string; role: string }) {
return <p>Hello, {name}! Your role is {role}.</p>;
}
// Usage:
<Greeting name="Alice" role="admin" />TypeScript-grænseflade til props
Definér en navngiven grænseflade til props for at få autofuldførelse, typekontrol og dokumentation.
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
variant?: 'primary' | 'secondary' | 'ghost';
}
function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn btn-${variant}`}
>
{label}
</button>
);
}children-egenskaben
Egenskaben children indeholder indholdet mellem komponentens åbnings- og afslutningstags. Angiv typen som React.ReactNode for at acceptere alt indhold, der kan gengives.
interface CardProps {
title: string;
children: React.ReactNode;
}
function Card({ title, children }: CardProps) {
return (
<div className="card">
<h2>{title}</h2>
<div className="card-body">{children}</div>
</div>
);
}
// Usage:
<Card title="Hello">
<p>Card content goes here.</p>
</Card>Standardprops med destrukturering
Angiv standardværdier direkte i destruktureringsmønstret. Dette er den moderne tilgang — den forældede defaultProps-API anbefales ikke længere.
function Alert({ type = 'info', message, onClose }: AlertProps) {
return (
<div className={`alert alert-${type}`}>
<span>{message}</span>
<button onClick={onClose}>×</button>
</div>
);
}Komposition af komponenter
Komponenter komponeres: en Page bruger en Layout, som bruger en Nav og en Sidebar, der hver især bruger mindre byggesten som Button og Icon. Dette komponenttræ er React-komponenttræet.
Navngivningskonventioner
Komponentnavne skal begynde med et stort bogstav. Navne med små bogstaver behandles som HTML-elementer. <div> er en HTML div; <Div> er en React-komponent med navnet Div.
Rene komponenter
En komponent er ren, hvis de samme props altid giver det samme resultat, og der ikke forekommer bivirkninger under gengivelsen. Rene komponenter er nemmere at forstå og optimere.
// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;
// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
return <p>{id}</p>;
};Videregivelse af funktioner som props
Funktioner (tilbagekald) videregives som props, så børn kan kommunikere med forældrene. Forælderen definerer funktionen, og barnet kalder den.
function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
return (
<li>
{text}
<button onClick={onDelete}>Delete</button>
</li>
);
}Spredning af props
Spredningsoperatoren videregiver alle props fra et objekt til en komponent. Det er nyttigt til wrapper- og videresendende komponenter, men brug det med omtanke — uventede props kan sendes videre.
function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
return <input {...props} className={`input-base ${props.className || ''}`} />;
}Fragmenter og nøgler i props-sammenhæng
Når du gengiver en liste af komponenter som børn, skal hver komponent have en unik key-prop. Nøgler hjælper React med at identificere, hvilke elementer der er ændret, tilføjet eller fjernet.
Hurtigt tjek
Hvordan angiver du en standardværdi for en prop i en moderne React-funktionskomponent?
Opsummering: komponenter og props
Funktionelle komponenter er JavaScript-funktioner, der returnerer JSX. Props sender data fra forælder til barn. Brug TypeScript-grænseflader til prop-typer. children: React.ReactNode til indhold i slots. Standardværdier i destrukturering. Videregiv tilbagekald som props for kommunikation fra barn til forælder. Navne begynder med store bogstaver.
Lær HTML 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
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Funktionelle komponenter og props” gratis?
Ja — hele teksten til “Funktionelle komponenter og 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 Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Funktionelle komponenter og props”?
Opret komponenter som funktioner, modtag og destructurér props, og brug PropTypes eller TypeScript-typer til at dokumentere de forventede datastrukturer. Du øver dig i Frontend 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å Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend 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 “Funktionelle komponenter og 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 Frontend Academy-lektion?
Ja. Alle Frontend 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
- JSX: syntaks og transpilation
- Funktionelle komponenter og props
- useState-hooket: state og genrenderinger
- Lister, keys og betinget rendering