当需要访问和更新DOM元素时，如何在Svelte / Sapper中编写反应式语句？

问题描述

我正在尝试编写一个函数drawChart，每次变量stats更改以更新当前图表时都会调用该函数。

使用onMount时，我可以绘制我的初始图表，但是当我获取新的统计信息时，该图表不会更新。

我不知道如何在Sapper中执行此操作，因为我的函数还依赖于canvas元素来用于图表的上下文。

我尝试编写诸如$: drawChart(chartContext,stats)之类的反应式语句，但是chartContext未定义。

我的代码：

<script>
    import { onMount } from 'svelte';
    import Chart from 'chart.js';

    export let stats;

    let chartContext;
    let chartCanvas;
    let chart;

    onMount(() => {    
        chartContext = chartCanvas.getContext('2d');

        drawChart(chartContext,stats);
    })

    const drawChart = (chartContext,stats) => {
        const s = fetchStats(stats);

        chart = new Chart(chartContext,{
            type: 'bar',data: {
                labels: s.seasons,datasets: [{
                    label: s.stat1.label,data: s.stat1.data,backgroundColor: 'whitesmoke',borderColor: 'black',borderWidth: 1
                }]
            },options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },maintainAspectRatio: false,responsive: true
            }
        });
    }

    // I want this to be called each time stats is updated,but it does not work as chartContext is undefined here
    $: drawChart(chartContext,stats);
</script>

<canvas id="chart" width="200" height="200" aria-label="chart" role="figure" bind:this={chartCanvas}></canvas>

有没有办法解决这个问题？任何帮助，我们将不胜感激：）

解决方法

是的，在chartContext仍未定义的情况下，您有望运行反应式块。它发生在onMount之前。 Svelte可以在任何因变量更改时随时运行反应块，其中包括它们的初始值。 Svelte不会在运行反应式块之类之前等待组件在DOM中安装。

因此，您只需要在代码中考虑这种特殊情况即可。

$: if (chartContext) drawChart(chartContext,stats)

这里。搞定。 （您可能还想确保以相同的方式设置stats，以使您的组件对其使用者可能发送给它的内容更具弹性。）