Svelte：强制重绘组件

Question

我有一组图表数据。这些图可以是added/removed/reordered。问题是文档中已经存在的组件不会被 Svelte 重新绘制。

<script>
    // App.svelte
    import Graph from "./Graph.svelte";

    let arr = [];
    
    function add(n) {
        arr.unshift(n)
        arr = arr
    }
    
    add(1)
    setTimeout(() => add(2), 1000)
    setTimeout(() => add(3), 2000)
</script>

{#each arr as number}
    <Graph {number} />
{/each}

<script>
    // Graph.svelte
    import { onMount } from 'svelte'
    
    export let number
    let graph
    
    function updateCanvas() {
        graph = number
    }
    
    updateCanvas(number)
</script>

<div>{graph}</div>

结果是第一张图我画了三遍。这是因为它始终是数组中的最后一个，并且始终是唯一要渲染的。如何强制重绘每个 Graph ?

https://svelte.dev/repl/cc2ee63a296342a9b71c715fdb16aca6?version=3.37.0

提前致谢。

Answer 1

您需要告诉 Svelte 在每次道具更改时重新运行 updateCanvas。现在 updateCanvas(number) 在启动时只有运行一次。让它成为反应式就像在前面添加 $: (docs reactive assignment here) 一样简单。 Graph.svelte 的固定代码：

<script>
    // Graph.svelte
    import { onMount } from 'svelte'
    
    export let number
    let graph
    
    function updateCanvas() {
        graph = number
    }
    
    $: updateCanvas(number)
</script>

<div>{graph}</div>

Answer 2

如 svelte 教程 here 中明确所述，尝试更新屏幕时，pop 和 unshift 等方法不起作用。但是，您可以使用对我有用的arr = [n,...arr]！

Svelte：强制重绘组件

Svelte: force to redraw a component

javascript

svelte