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

Question

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

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

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

我无法通过将外部 <div> 更改为 <label> 来使用隐式关联，因为输入不是直接子项。
我不能使用标签 for 属性，因为重复使用该元素会创建可变的相同 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

为什么不为输入定义一个唯一的名称，因为您需要一个名称？然后你可以有一个像这样的组件：

Input.svelte

<script>
    export let name
    export let label
    let value
        
    const getInputId = () => {
        return `input_${name}`
    }
</script>

<div>
    <label for={getInputId()}>{label}</label>
    <div>
        <input id={getInputId()} bind:value>
    </div>
</div>

并像这样使用它：

App.svelte

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

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

查看 REPL。

Answer 2

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

Input.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>

App.svelte

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

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

见REPL

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

Svelte: Associate label and input in a reusabe way

html

dom

svelte

svelte-3