将isActive设为false时Svelte响应式声明未触发的问题排查

这是你的响应式声明写法错误，并非Svelte的特性限制。

问题根源 #

你写的响应式语句：

$: isActive && handleActiveChange()

利用了逻辑与&&的短路特性——只有当左侧表达式isActive为true时，才会执行右侧的handleActiveChange()。当调用setActiveState(false)时，isActive变为false，左侧条件不成立，右侧函数自然不会触发。

修正方案 #

核心是确保isActive变化时，无论值是true还是false，对应的逻辑都能执行，有两种常用方式：

方案1：直接监听isActive变化并执行函数

去掉逻辑与判断，让响应式语句直接调用函数：

$: handleActiveChange()

或者显式声明依赖（Svelte会自动追踪，但写法更清晰）：

$: [isActive], handleActiveChange();

方案2：将逻辑直接写在响应式块中

省去单独的handleActiveChange函数，把逻辑直接放在响应式块里，更直观：

$: {
  if (isActive) {
    rootBtn.classList.add("active")
    animateOpen()
  } else {
    rootBtn.classList.remove("active")
    animateClose()
  }
}

额外注意点 #

你的子组件里还有一个语法错误：on:onMount是错误写法，正确的onMount使用方式是先导入再直接调用：

import { onMount } from 'svelte';

onMount(() => {
    rootBtn.style.width = btnWidth
})

修正后的子组件代码示例 #

import { onMount } from 'svelte';

let isActive = false
let menuOpened = false

onMount(() => {
    rootBtn.style.width = btnWidth
})

// 方案1：直接调用函数
$: handleActiveChange()

export function setActiveState(activeState) {
    isActive = activeState
}

function handleActiveChange() {
    if(isActive) {
        rootBtn.classList.add("active")
        animateOpen()
    } else {
        rootBtn.classList.remove("active")
        animateClose()
    }
}

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