如何在没有 "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

你可以使用

看这里：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}

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

How can I switch the underlying markup of a Svelte component without an "if"?

svelte