Как я могу переключить базовую разметку компонента Svelte без «если»?

Question

Может ли кто-нибудь предложить лучший способ реализации компонента, который может быть a или button? Я согласен с этим подходом, но все дублируется между ними, кроме href на a и on:click на button:

{#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>, но я полагаю, что это слишком много для вашего варианта использования (вам нужно создать 2 отдельных компонента только для vanilla button и a). Похоже, вам нужна только лучшая читаемость. Чтобы получить больше 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}

Answer 2

можно использовать

Посмотрите здесь: https://svelte.dev/tutorial/svelte-component