javascript / intermediate
Snippet
Prop-Drilling vermeiden mit der Context API
Die Context API ermöglicht es, Daten über den Komponentenbaum zu teilen, ohne Props durch jede Zwischenebene zu reichen (Prop-Drilling). 'setContext' wird in einem Vorfahren verwendet, und 'getContext' ruft die Daten in jedem beliebigen Nachkommen ab.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
// Parent.svelte<script>import { setContext } from 'svelte';let theme = 'dark';setContext('app-theme', { theme });</script>// DeepChild.svelte<script>import { getContext } from 'svelte';const { theme } = getContext('app-theme');</script><div class="{theme}">Themed Content</div>
svelte
Erklärung
1
setContext('app-theme', { theme });
Verknüpft einen spezifischen Schlüssel mit einem Wert für alle verschachtelten Komponenten.
2
const { theme } = getContext('app-theme');
Ruft den mit dem Schlüssel verknüpften Wert vom nächsten Anbieter ab.