Svelteテンプレート構文

{@render ...}

{@render ...} タグを使用して、スニペットをレンダリングします。

{#snippet sum(a, b)}
	<p>{a} + {b} = {a + b}</p>
{/snippet}

{@render sum(1, 2)}
{@render sum(3, 4)}
{@render sum(5, 6)}

式は sum のような識別子、または任意の JavaScript 式になります

{@render (cool ? coolSnippet : lameSnippet)()}

オプションのスニペット

スニペットが未定義の可能性がある場合（たとえば、それが受信プロップであるため）、オプションチェーンを使用して、スニペットが定義されている場合にのみレンダリングできます

{@render children?.()}

または、:else 句を使用して {#if ...}ブロックを使用し、フォールバックコンテンツをレンダリングします

{#if children}
	{@render children()}
{:else}
	<p>fallback content</p>
{/if}

前次