Svelte中部分HTML元素的条件呈现

Question

例如，假设我想为一组单选按钮创建一个组件：

<!-- App.Svelte --> 
<script>
    import Radio from './Radio.svelte';
</script>

<main>
    <Radio group={"stooges"}
        btns={["Larry", "Curly", "Moe", "Shep", "Joe", "Curley Joe"]}
        checked={"Curly"}
        disabled={["Moe", "Joe"]}
    />
</main>

无线电组组件的下列实现会产生正确的行为；Curly是预选的；Moe和Joe是灰色的：

<!-- Radio.svelte -->
<script>
  export let group;
  export let btns;
  export let checked;
  export let disabled;
</script>

{#each btns as btn, idx}
  {#if btn === checked}
    {#if disabled.includes(btn)}
      <input type="radio" id={btn} value={btn} name={group} 
        checked disabled>
    {:else}
      <input type="radio" id={btn} value={btn} name={group} checked>
    {/if}
  {:else}
    {#if disabled.includes(btn)}
      <input type="radio" id={btn} value={btn} name={group} disabled>
    {:else}
      <input type="radio" id={btn} value={btn} name={group}>
    {/if}
  {/if}
  <label for={btn}>{btn}</label>
{/each}

以下是无线电组组件的另一个实现，它更简洁，但不会编译：

<!-- Radio.svelte -->
<script>
  export let group;
  export let btns;
  export let checked;
  export let disabled;
</script>

{#each btns as btn, idx}
  <input type="radio" id={btn} value={btn} name={group}
    {#if btn === checked} checked {/if}
    {#if disabled.includes(btn)} disabled {/if} 
  >
  <label for={btn}>{btn}</label>
{/each}

编译器用消息#if标记第一个Expected } svelte(unexpected-token)语句的开头大括号。

对于第二个实现中的错误，我能想到的唯一原因是，与第一个实现不同，第一个实现在每个if-else分支上包含一个完整的if-else元素，第二个实现在每个if-else分支上包含一个input元素的一部分。然而，据我所知，Svelte文档并不会对此发出警告。

Answer 1

不能使用模板语法({#if}..{:else}..{/if}、{#each}..{/each}等)内部元素/组件标记。

但是，您可以根据条件(这正是您要实现的)来实现元素/组件属性的解析：

{#each btns as btn, idx}
  <input
    type="radio"
    id={btn}
    value={btn}
    name={group}
    checked={btn === checked}
    disabled={disabled.includes(btn)}
  >
  <label for={btn}>{btn}</label>
{/each}

根据相应的语句评估，checked和disabled将被指定为true或false。

演示REPL