Standaardwaarden voor props
Wijs fallbackwaarden toe aan props wanneer de bovenliggende component ze niet aanlevert.
Standaardwaarden voor props is een gratis Sveltejs Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Sveltejs Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Sveltejs Academy bevat in totaal 4 lessen.
Waarom standaardwaarden
Dankzij standaardwaarden kun je een component gebruiken zonder dat elke gebruiker elke prop hoeft door te geven. Ze bepalen het terugvalgedrag.
Inline standaardwaarde
Wijs een waarde toe wanneer je de prop declareert.
export let label = "Click me";Functies als standaardwaarden
Standaardwaarden kunnen expressies of letterlijke functies zijn.
export let onClick = () => {};Standaardwaarden voor objecten
Gebruik een objectliteral voor complexe standaardwaarden.
export let options = { color: "blue", size: "md" };Let op gedeelde verwijzingen
Objectliteralen als standaardwaarden worden per instantie geëvalueerd, zodat elke component een eigen object krijgt. Je kunt dat object veilig wijzigen.
Overschrijven vanuit de ouder
Wanneer de ouder een waarde opgeeft, vervangt die waarde de standaardwaarde voor die instantie.
<Button label="Save" />Verplichting detecteren
Zonder standaardwaarde is de prop conceptueel verplicht. TypeScript kan dit afdwingen met de hint required.
null en undefined
Als je undefined als waarde doorgeeft, wordt de standaardwaarde gebruikt; als je null doorgeeft, gebeurt dat niet.
Standaardwaarden samenstellen
Stel standaardwaarden samen uit andere props met reactieve declaraties.
export let title = "";
export let subtitle;
$: effectiveSubtitle = subtitle ?? title;Documentatie
Documenteer standaardwaarden in JSDoc-opmerkingen, zodat de infovensters van je IDE ze kunnen weergeven.
/** @param {string} label */Stabiele standaardwaarden
Vermijd standaardwaarden die tussen renderingen veranderen. Stabiele standaardwaarden beperken opnieuw renderen en onverwacht gedrag.
Snelle controle
Hoe stel je een standaardwaarde voor een prop in?
Herhaling
Geef standaardwaarden op met een gewone toewijzing. Daardoor zijn componenten zelfstandig en wordt duidelijk welke props optioneel zijn.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Standaardwaarden voor props” gratis?
Ja — de volledige tekst van “Standaardwaarden voor props” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Sveltejs Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Sveltejs Academy bevat in totaal 4 lessen.
Wat leer ik in “Standaardwaarden voor props”?
Wijs fallbackwaarden toe aan props wanneer de bovenliggende component ze niet aanlevert. Je oefent met Sveltejs Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Sveltejs Academy te beginnen?
Ervaring vooraf is niet nodig. Sveltejs Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Standaardwaarden voor props”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Sveltejs Academy?
Ja. Elke les over Sveltejs Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Props declareren met export let
- Props doorgeven vanuit de bovenliggende component
- Standaardwaarden voor props
- Props doorgeven met $$props en $$restProps