Svelte遍历常量数组及选中状态更新失效问题求解

你的问题核心是WeekDay组件的样式类名没有响应式更新，结合Svelte的响应式特性，按以下步骤修复即可：

1. 让WeekDay的样式计算响应式化 #

当前WeekDay里的timeClass是组件初始化时一次性计算的，当selected属性变化时不会重新生成，导致样式不更新。用Svelte的$:标记声明响应式逻辑，就能让类名随依赖变量自动更新：

修改WeekDay组件代码：

<script lang="ts">
    export let datetime;
    export let dd;
    export let isToday;
    export let thisMonth;
    export let selected = false;

    export let topLeft;
    export let topRight;
    export let bottomLeft;
    export let bottomRight;

    // 用$:标记响应式计算，依赖变量变化时自动重新生成类名
    $: timeClass = (() => {
        let cls = 'mx-auto flex h-7 w-7 items-center justify-center rounded-full';
        
        if (selected || isToday) cls += ' font-semibold';
        if (!selected && !isToday && thisMonth) cls += ' bg-white text-gray-900';
        if (!selected && !isToday && !thisMonth) cls += ' bg-gray-50';
        if (isToday && !selected) cls += ' text-indigo-600';
        if (selected && isToday) cls += ' bg-indigo-600 text-white';
        if (selected && !isToday) cls += ' bg-gray-900 text-white';
        
        return cls;
    })();
</script>

<time {datetime} class={timeClass}>{dd}</time>

2. 优化主组件的#each循环（可选但推荐） #

给#each循环添加唯一key，让Svelte更高效地跟踪每个Week组件的状态，避免不必要的重渲染：

修改主组件的循环部分：

{#each [0, 1, 2, 3, 4] as week_n (week_n)}
    <Week
        week={week_n === selected
            ? days.slice(week_n * 7, week_n * 7 + 7).map((d) => ({ ...d, selected: true }))
            : days.slice(week_n * 7, week_n * 7 + 7)}
        on:select={() => handleSelect(week_n)}
    />
{/each}

为什么硬写2能生效？ #

硬写week_n === 2时，组件初始化就会给第3周的所有天标记selected: true，WeekDay初始化时计算的样式是正确的，但后续点击其他周时，虽然selected变量更新了，WeekDay的样式类名不会重新计算，所以看不到变化。用响应式声明后，只要selected属性变化，样式就会自动更新。

内容的提问来源于stack exchange，提问作者wildfluss