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>

无线电组组件的以下实现产生正确的行为；预先选择CCD_ 1；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}

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

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

Answer 1

不能在元素/组件标记中使用模板语法(Curly0、{#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}

CCD_ 12和CCD_。

演示REPL