上下文 API 为组件提供了一种机制，使它们可以相互 ‘talk’，而无需传递数据和函数作为 props，或分派大量事件。这是一个高级功能，但很有用。在这个练习中，我们将使用上下文 API 重新创建 George Nees（生成艺术的先驱之一）的 Schotter。

¥The context API provides a mechanism for components to ‘talk’ to each other without passing around data and functions as props, or dispatching lots of events. It’s an advanced feature, but a useful one. In this exercise, we’re going to recreate Schotter by George Nees — one of the pioneers of generative art — using the context API.

在 Canvas.svelte 内部，有一个 addItem 函数可以将一个项目添加到画布。我们可以使用 setContext 将其提供给 <Canvas> 内部的组件，例如 <Square>：

¥Inside Canvas.svelte, there’s an addItem function that adds an item to the canvas. We can make it available to components inside <Canvas>, like <Square>, with setContext:

import { setContext } from 'svelte';
import { SvelteSet } from 'svelte/reactivity';

let { width = 100, height = 100, children } = $props();

let canvas;
let items = new SvelteSet();

setContext('canvas', { addItem });

function addItem(fn) {
	$effect(() => {
		items.add(fn);
		return () => items.delete(fn);
	});
}

在子组件中，我们现在可以使用 getContext 获取上下文：

¥Inside child components, we can now get the context with, well, getContext:

import { getContext } from 'svelte';

let { x, y, size, rotate } = $props();

getContext('canvas').addItem(draw);

到目前为止，所以...无聊。让我们为网格添加一些随机性：

¥So far, so... boring. Let’s add some randomness to the grid:

<div class="container">
	<Canvas width={800} height={1200}>
		{#each Array(12) as _, c}
			{#each Array(22) as _, r}
				<Square
					x={180 + c * 40 + jitter(r * 2)}
					y={180 + r * 40 + jitter(r * 2)}
					size={40}
					rotate={jitter(r * 0.05)}
				/>
			{/each}
		{/each}
	</Canvas>
</div>

必须在组件初始化期间调用 setContext 和 getContext，以便正确绑定上下文。键 — 在本例中为 'canvas' — 可以是任何你喜欢的内容，包括非字符串，这对于控制谁可以访问上下文很有用。

¥setContext and getContext must be called during component initialisation, so that the context can be correctly bound. The key — 'canvas' in this case — can be anything you like, including non-strings, which is useful for controlling who can access the context.

你的上下文对象可以包含任何内容，包括反应状态。这允许你将随时间变化的值传递给子组件：

¥[!NOTE] Your context object can include anything, including reactive state. This allows you to pass values that change over time to child components:

// in a parent component
import { setContext } from 'svelte';

let context = $state({...});
setContext('my-context', context);

// in a child component
import { getContext } from 'svelte';

const context = getContext('my-context');