如何在Svelte Runes组件中使用指令？class:active报错解决

核心原因 #

Svelte的指令（包括class:xxx、use:xxx这类特殊语法）仅能作用于原生DOM元素，自定义组件无法直接接收这类指令，这就是你触发渲染错误的根本原因。

解决方案 #

你需要把外部的条件类逻辑转换成组件能接收的props，再传递到内部的<a>标签上，以下是两种常用实现方式：

方案1：新增特定props控制激活状态

修改ButtonLink组件，添加active props，在内部原生<a>标签上直接应用class:active指令：

<script>
    import {route} from "@mateothegreat/svelte5-router";

    let {children, className, active = false, ...rest} = $props();
</script>

<a
        use:route
        class={`btn ${className}`}
        class:active={active}
        {...rest}
>
    {@render children()}
</a>

使用组件时，直接传递active属性替代class:active指令：

<ButtonLink
       onclick={() => $currentRoute = window.location.pathname}
       href={href}
       active={isActive}
>

方案2：接收动态class对象（支持多条件）

如果需要同时处理多个动态class条件，可以让组件接收一个classProps对象，利用Svelte的class合并语法处理：

<script>
    import {route} from "@mateothegreat/svelte5-router";

    let {children, className, classProps = {}, ...rest} = $props();
</script>

<a
        use:route
        class="btn"
        class={className}
        class={classProps}
        {...rest}
>
    {@render children()}
</a>

使用组件时，将所有动态class条件封装到classProps中：

<ButtonLink
       onclick={() => $currentRoute = window.location.pathname}
       href={href}
       classProps={{ active: isActive, disabled: isDisabled }}
>

关键总结 #

自定义组件无法直接接收Svelte指令，必须通过props将指令逻辑传递到内部的原生DOM元素上，这是Svelte组件模型的设计规范。

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