我在一个可排序的表中出现了字体很棒的图标。它们渲染得很好，但当我对表的行重新排序时，图标会保留在原来的位置，而不会与其他表内容一起排序(重新渲染？(。我正在使用Svelte3和Bulma。我想我需要使用Svelte的bind:this属性，但我不确定具体在哪里。(表行在Svelte{#each}块FWIW中生成。(
解决方案1：对每个块进行键控
当你想重新排序一个{#each}块时，你需要使用一个键控的每个块：
{#each things as thing (thing.id)}
^^^^^^^^^^
这将对组件及其关联的DOM元素进行重新排序。
https://svelte.dev/tutorial/keyed-each-blocks
解决方案2：反应性声明
钥匙并不总是可能的。如果没有键，第一行的内部状态将是第一行的状态。
只要内部状态派生/连接到道具，这就不是问题。
export let thing;
let icon = '/img/icons/' + thing.slug; // wrong
此代码运行一次，图标是根据初始道具设置的，但从未更新。
export let thing;
$: icon = '/img/icons/' + thing.slug; // right
现在，每当=右侧的变量发生变化时，图标都会更新。
https://svelte.dev/tutorial/reactive-declarations
我们试图在这里做一些类似的事情：将FontAwesome与Svelte一起使用，并在一些反应语句上更新/重新渲染图标。在我们的头撞在墙上很长一段时间后，我们发现我们使用的是Font Awesome JS，它会把我们的<i>标签变成<svg>的。当我们关闭JS，只使用Font Awesome CSS时，图标会根据需要重新渲染。