Polymorphe UI-Komposition via typisierte Snippet-Props

Snippet

Polymorphe UI-Komposition via typisierte Snippet-Props

Snippets in Svelte 5 ersetzen das alte Slot-System durch einen leistungsfähigeren, funktionsähnlichen Mechanismus. Durch die Übergabe von Snippets als Props können hochgradig polymorphe Komponenten erstellt werden. Dieses Expertenmuster erlaubt es dem Parent, UI-Blöcke zu definieren, die das Child mit spezifischem Kontext (wie 'item' im Row-Snippet) rendert. Dies verbessert die Typsicherheit und macht die API der Komponente explizit, anstatt sich auf implizite Slot-Platzierungen zu verlassen.

snippet.js
javascript
<script lang="ts">
  import type { Snippet } from 'svelte';
 
  let { 
    data, 
    header, 
    row 
  }: { 
    data: any[], 
    header: Snippet, 
    row: Snippet<[any]> 
  } = $props();
</script>
 
<table>
  <thead>{@render header()}</thead>
  <tbody>
    {#each data as item}
      {@render row(item)}
    {/each}
  </tbody>
</table>

svelte

Erklärung

row: Snippet<[any]>

Definiert eine Snippet-Prop, die ein Argument vom Typ 'any' akzeptiert.

{@render header()}

Das @render-Tag ruft die Snippet-Funktion auf, um deren HTML-Inhalt auszugeben.

{@render row(item)}

Ruft das Snippet auf und übergibt Daten an den vom Parent bereitgestellten Template-Block.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek