Svelte 中是否有更好的方法来包含条件 HTML 元素
Is there a better way in Svelte to include a conditional HTML element
我开始经常遇到这个问题。如果布尔值为真,我想在其他元素周围包含一个元素。在下面的示例中,我创建了两个 if 语句,但如果我要包装的代码很大,这将使发生的事情变得不清楚。此外,还会有重复代码。这个解决方案有更好的方法吗?
<script>
let boolean = true;
</script>
{#if}
<img src="source" />
{/if}
{#if}
<a href="/home">
<img src="source" />
</a>
{/if}
如果这是您经常做的事情,您可以使用 slots 将其制成一个 ConditionalLink
组件。
<!-- ConditionalLink.svelte -->
<script>
export let isWrapped = false;
export let href;
</script>
{#if isWrapped}
<a {href}>
<slot/>
</a>
{:else}
<slot/>
{/if}
可以这样使用:
<script>
import ConditionalLink from './ConditionalLink.svelte';
let wrapLink = false;
</script>
<ConditionalLink isWrapped={wrapLink} href="#">
I'm a link
</ConditionalLink>
<label><input type="checkbox" bind:checked={wrapLink}> wrap link</label>
我开始经常遇到这个问题。如果布尔值为真,我想在其他元素周围包含一个元素。在下面的示例中,我创建了两个 if 语句,但如果我要包装的代码很大,这将使发生的事情变得不清楚。此外,还会有重复代码。这个解决方案有更好的方法吗?
<script>
let boolean = true;
</script>
{#if}
<img src="source" />
{/if}
{#if}
<a href="/home">
<img src="source" />
</a>
{/if}
如果这是您经常做的事情,您可以使用 slots 将其制成一个 ConditionalLink
组件。
<!-- ConditionalLink.svelte -->
<script>
export let isWrapped = false;
export let href;
</script>
{#if isWrapped}
<a {href}>
<slot/>
</a>
{:else}
<slot/>
{/if}
可以这样使用:
<script>
import ConditionalLink from './ConditionalLink.svelte';
let wrapLink = false;
</script>
<ConditionalLink isWrapped={wrapLink} href="#">
I'm a link
</ConditionalLink>
<label><input type="checkbox" bind:checked={wrapLink}> wrap link</label>