当 Svelte 重用父 dom 元素时如何确保仅本地转换

在 Svelte 中，我有一个组件用于显示两个不同列表中的项目。当这些项目从一个列表移动到另一个列表时，它们使用过渡来动画进入或退出。

不过，我还有一种方法可以过滤屏幕上显示的内容。显示一组新的项目将使用相同的组件，但具有不同的数据。在这种情况下，我不希望发生过渡动画。我假设添加local修饰符可以解决这个问题，但 Svelte 似乎并没有将父元素删除到列表中，而是重用它并在现有列表 DOM 元素中添加新数据。

我尝试重现我在下面的示例代码中看到的内容。

想要的行为：

1. 单击 TODO 会将 TODO 从一个列表切换到另一个列表。
2. 单击“切换类别”将切换列出的 TODO，而不需要动画<li>添加或删除的 TODO 的 s。

实际行为：

1. 正如预期的那样发生。
2. 切换的待办事项通过动画进行。

我怎样才能改变我的例子以获得我想要的效果？

应用程序.svelte：

<script>
    import Todos from './Todos.svelte';

    let todos = [
        { id: 1, category: 'personal', name: 'Walk dog', done: false },
        { id: 2, category: 'personal', name: 'Take out trash', done: false },
        { id: 3, category: 'work', name: 'Make login page functional', done: false },
        { id: 4, category: 'work', name: 'Make login page elegant', done: false }
    ];

    let currentCategory = 'personal';
    const toggleCategory = () => {
        currentCategory = currentCategory == 'personal' ? 'work' : 'personal';
    }

    const toggleTodo = id => {
        todos = todos.map(todo => {
            if (todo.id === id) {
                return { ...todo, done: !todo.done }
            }
            return todo;
        });
    }

    $: categoryTodos = todos.filter(x => x.category == currentCategory);
</script>

<button on:click={toggleCategory}>Switch Categories</button>
<Todos todos={categoryTodos} {toggleTodo}>
</Todos>

Todos.svelte：

<script>
    import { slide } from 'svelte/transition';
    export let todos;
    export let toggleTodo;

    $: complete = todos.filter(t => t.done);
    $: incomplete = todos.filter(t => !t.done);
</script>

<h1>Incomplete</h1>
<ul>
    {#each incomplete as {id, name} (id)}
    <li transition:slide|local on:click={() => toggleTodo(id)}>{name}</li>
    {/each}
</ul>
<h1>Complete</h1>
<ul>
    {#each complete as {id, name} (id)}
    <li transition:slide|local on:click={() => toggleTodo(id)}>{name}</li>
    {/each}
</ul>

Update

自 v3.28.0 起，此关键功能现已成为 Svelte 的一部分（请参阅issue https://github.com/sveltejs/svelte/issues/1469#issuecomment-698955660).

语法如下：

{#key expression}...{/key}

之前的回答

在 React 中，您可以使用keyprop 使渲染器重新创建一个可以重用的元素（相同的标签等）。

// React
<Todos items={items} key={currentCategory} />

但 Svelte 不支持key， 可以？嗯，有点。 Svelte 确实具有等效功能，但仅限于{#each ...} blocks.

语法是这样的（docs https://svelte.dev/docs#each-- 文档中没有提到这个精确的语法，但我想它只是被遗忘了）：

{#each expression as name (key)}...{/each}

就像在 React 中一样，当键的值发生变化时（否则会重用），组件将被重新创建。

还有苏...

<script>
  export let allItems
  export let currentCategory

  $: items = allItems.filter(x => x.category === currentCategory)
</script>

{#each [items] as todos (currentCategory)}
  <Todos {todos} />
{/each}

呼呼。正确的？

Using currentCategory作为密钥将创建一个新的<Todos />每次类别更改时组件，这可能是您在您的情况下想要的。

就像在 React 中一样，必须明智地选择键的值，以便在每次需要时重新创建，但不能更多（否则它会杀死您的情况下所需的项间转换）。

键的值不限于每个循环中当前评估的项。它可以来自 Svelte 范围内的任何地方，因此您可以发挥创意。它甚至可以是一个内联对象{}这会重新创建......嗯，基本上一直！

Edit

您可以将 hack 变成它自己的组件，以便消费者获得更清晰的语法：

<!-- Keyed.svelte -->

<script>
    export let key
    // we just need a 1-length array
    const items = [0]
</script>

{#each items as x (key)}
    <slot />
{/each}

像这样使用：

<script>
  import Keyed from './Keyed.svelte'
  
  export let items
  export let category
</script>

<Keyed key={category}>
  <Todos {items} />
</Keyed>

See example https://svelte.dev/repl/2373af8e5b5448c1821ceffe95bd3f26?version=3.15.0在 Svelte 的 REPL 中。