如何在没有“if”的情况下切换 Svelte 组件的底层标记？

Question

谁能建议一种更好的方法来实现可以是a或button的组件？ 我同意这种方法，但除了a上的href和button上的on:click之外，它们之间的所有内容都是重复的：

{#if url}
  <a class="button {classes}"
     class:button--solid={!outlined}
     class:button--outlined={outlined}
     {disabled}
     bind:this={element}
     href={url}
     >
    <span class="label"><slot /></span>
  </a>
{:else}
  <button class="button {classes}"
          class:button--solid={!outlined}
          class:button--outlined={outlined}
          {disabled}
          bind:this={element}
          on:click
          >
    <span class="label"><slot /></span>
  </button>
{/if}

谢谢！

Answer 1

你可以使用 <svelte:component this={selected.component}/>

看看这里： https://svelte.dev/tutorial/svelte-component

Answer 2

如前所述，您可以使用<svelte:component>但我认为这对于您的用例来说太过分了（您需要为 vanilla button和a创建 2 个单独的组件）。 看起来你只需要更好的可读性。 获得更多 DRY 的解决方法是使用spread props 。

<script>
    export let url;
    const classes = 'class-1 class-2';
    const outlined = true;
    const disabled = true;
    $: props = {
        class: `button ${classes} ${outlined ? 'button--outlined' : 'button--solid'}`,
        disabled
    }
</script>

{#if url}
    <a {...props} href={url}><slot/></a>
{:else}
    <button {...props} on:click><slot/></button>
{/if}