svelte - 具有各自独立交互和价值的多个组件答案

【问题标题】：svelte - multiple components with their own isolated interactions and valuessvelte - 具有各自独立交互和价值的多个组件
【发布时间】：2020-12-02 14:22:34
【问题描述】：

我创建了一个切换按钮组件，以便我可以在项目的各个地方使用它：

<style>
  .butt{
    background:blue;
  }
  .butt.active{
    background:lightblue;
  }
</style>

<script>
  function toggle(e){
    console.log('toggle')
    console.log(e.target.id)
    let el = document.getElementById(e.target.id)
    el.classList.toggle("active")
  }
</script>

<div
on:click={toggle}
class="butt"
id="abc"
>sample button</div>

然后我把它添加到我的app.svelte:

<script>
  import Togglebutt from "./Togglebutt.svelte"
</script>

{#each [1,2,3] as thing (thing)}
  <Togglebutt />
{/each}

我有两个问题：

每次点击按钮，它只会触发第一个按钮，不会触发 2 和 3。
添加了 css 类 active，但按钮永远不会呈现为预期的颜色。

如何解决这两个问题？

【问题讨论】：

标签： javascript svelte-3 svelte-component

【解决方案1】：

第一个问题是由于在执行document.getElementById(e.target.id) 时，您将拥有三个按钮，每个按钮的 id 为 abc，它将总是返回它找到的第一个。可以通过将 id 作为属性传入来解决此问题，以便您的每个切换都有一个唯一的 id。

另一个问题是 Svelte 将删除所有 未在您的标记中明确使用的样式声明，active 类在您的标记中没有使用，因此它将被删除。

在使用 Svelte 时，像这样直接操作 DOM 通常不是一个好主意，而是依赖组件的状态和 Svelte 的内部逻辑来为您管理。

这意味着在您的脚本中，您将拥有一个跟踪组件状态的变量：

<script>
  export let toggled = false
</script>

并且你使用这个状态来有条件地将类添加到元素中

<div class:active={toggled}></div>

您可以更进一步，使用要求变量和类同名的条件类的简写：<div class:toggled></div>

这给了我们一个完整的组件

<style>
  .butt {
    background:blue;
  }
  .butt.toggled {
    background:lightblue;
  }
</style>

<script>
  export let toggled = false

  function toggle() {
    toggled = !toggled
  }
</script>

<div
  on:click={toggle}
  class="butt"
  class:toggled
>sample button</div>

【讨论】：