我在可排序的表格中出现了令人敬畏的字体图标。它们渲染得很好，但是当我重新对表格的行进行排序时，图标仍保留在它们所在的位置，并且不会与其他表格内容进行排序（重新渲染？）。我正在使用 Svelte3 和 Bulma。我猜我需要使用 Svelte 的 bind:this 属性，但我不确定具体在哪里。 （表格行在 Svelte {#each} 块中生成，FWIW。）
【问题讨论】：
标签： icons bulma font-awesome-5 svelte-3
解决方案 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
现在，每次= 右侧的变量更改时，图标都会更新。
【讨论】：
我们在这里尝试做类似的事情：将 FontAwesome 与 Svelte 结合使用，并在某些反应性语句上更新/重新渲染图标。在摸索了很长时间后，我们发现我们正在使用 Font Awesome JS，它会将我们的 <i> 标签变成 <svg> 的标签。当我们关闭 JS，只使用 Font Awesome CSS 时，图标会根据需要重新渲染。
【讨论】：