javascript / intermediate
Snippet
Rekursive Komponenten mit svelte:self
Das '<svelte:self>' Tag ermöglicht es einer Komponente, sich selbst rekursiv einzubinden. Dies ist essenziell für die Darstellung verschachtelter Datenstrukturen wie Baumansichten oder Dateisysteme.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>export let folder;</script><ul><li>{folder.name}</li>{#if folder.files}{#each folder.files as file}<li><svelte:self folder={file} /></li>{/each}{/if}</ul>
svelte
Erklärung
1
<svelte:self folder={file} />
Weist die Komponente an, eine weitere Instanz von sich selbst mit neuen Props zu rendern.
2
{#if folder.files}
Bietet einen Basisfall, um sicherzustellen, dass die Rekursion endet, wenn keine Dateien mehr vorhanden sind.