Svelte：以可重用的方式关联标签和输入

Question

我正在构建一个 Svelte 输入组件，该组件应该可以在同一页面上多次使用。

<div>
    <label>{label}</label>
    <div>
        <input bind:value>
        <!-- some more elements -->
    </div>
</div>

尝试关联标签和输入我遇到以下问题：

• 我无法通过将外部更改为 来使用隐式关联<div>，<label>因为输入不是直接子级。
• 我无法使用 labelsfor属性，因为重复使用该元素会创建可变的相同 id。

有没有办法在 Svelte 中创建组件实例唯一 id（前置或后置），或者是否有其他解决方案来解决此问题。

---

或者手动设置随机字符串作为 id 是最好的解决方案吗？

<script>
    const id = random_string();
    /* ... */
</script>

<div>
    <label for={id}>{label}</label>
    <div>
        <input {id} bind:value>
        <!-- some more elements -->
    </div>
</div>

Answer 1

您可以在模块上下文中定义一个计数器，然后使用它来创建唯一的 ID

输入.svelte

<script context="module">
    let counter = 0
</script>
<script>
        export let label
        let value
        let eltId = 'input_'+ counter++
</script>

<div>
    <label for={eltId}>{label}</label>
    <div>
        <input id={eltId} bind:value>
    </div>
</div>    

应用程序.svelte

<script>
    import Input from './Input.svelte'
</script>

<Input label='Select Country' />
<Input label='Select Country' />
<Input label='Select Country' />

参见REPL