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

Question

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

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

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

通缉行为：

1. 单击待办事项会将待办事项从一个列表切换到另一个列表。
2. 单击"切换类别"将切换列出的待办事项，而不会对添加或删除的待办事项的<li>进行动画处理。

实际行为：

1. 按预期发生。
2. 切换的待办事项与动画一起执行。

如何更改我的示例以获得我想要的效果？

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

Answer 1

更新

自 v3.28.0 起，此关键功能现在是 Svelte 的一部分(请参阅问题(。

语法如下：

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

<小时 />

上一个答案

在 React 中，您将使用key属性使渲染器重新创建一个可以重用的元素(相同的标签等(。

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

但是斯维尔特不支持key，是吗？嗯，有点。Svelte确实具有等效的功能，但仅在{#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}

胡胡.右？

每次分类更改时，使用currentCategory作为键都会创建一个新的<Todos />组件，这可能是您想要的。

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

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

编辑

您可以将 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>

参见Svelte的REPL中的示例。