javascript / intermediate
Snippet
Baumstrukturen mit rekursiven Komponenten
Das Element <svelte:self> ermöglicht es einer Komponente, sich selbst rekursiv einzubinden. Dieses Muster ist ideal für die Darstellung hierarchischer Daten wie Dateisysteme.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Folder.svelte --><script>export let name;export let children = [];</script><ul><li>{name}</li>{#if children.length > 0}<ul>{#each children as child}<svelte:self {...child} />{/each}</ul>{/if}</ul>
svelte
Erklärung
1
<svelte:self {...child} />
Rendert die aktuelle Komponente erneut für jedes Kind-Element im Array.
2
{#if children.length > 0}
Eine Basisprüfung, um endlose Rekursion zu verhindern.