Svelte 3中如何优雅地条件性添加和移除use:属性？

嘿，这个问题我刚好在项目里踩过坑，Svelte 3本身并不支持直接给use:指令加条件判断（比如use:classes={originalClasses}这种写法是不会生效的），不过有几种非常优雅的实现方式，完美适配你的场景：

方案1：在Action内部处理条件判断 #

这是最直观且简洁的方式，把条件逻辑直接封装到你的classes action函数里，组件代码依然保持干净。

首先修改组件代码，把originalClasses作为参数传给use:classes：

<script>
  import { classes } from "./functions.js";
  export let originalClasses;
</script>

<button use:classes={originalClasses}>Button</button>

然后在functions.js里更新classes函数，根据传入的条件决定是否执行逻辑：

export function classes(node, shouldApply) {
  // 如果条件不满足，直接返回，不执行任何操作
  if (!shouldApply) return;

  // 这里写你原来的classes逻辑，比如添加类名
  node.classList.add('custom-btn-class');

  // 如果需要清理副作用，返回destroy函数（可选）
  return {
    destroy() {
      node.classList.remove('custom-btn-class');
    }
  };
}

这种方式的好处是把条件判断和action逻辑绑定在一起，组件不用关心内部细节，代码复用性也强。

方案2：用通用包装器封装条件Action #

如果你不想修改原有的classes action，可以写一个通用的条件包装器，用来控制是否执行目标action，这个包装器还能复用在其他action上。

在functions.js里添加包装器函数：

// 通用条件action包装器
export function conditionalAction(targetAction, condition) {
  return (node) => {
    // 条件不满足则直接返回，不执行目标action
    if (!condition) return;
    // 条件满足时执行目标action
    return targetAction(node);
  };
}

// 原来的classes action保持不变
export function classes(node) {
  node.classList.add('custom-btn-class');
  return {
    destroy() {
      node.classList.remove('custom-btn-class');
    }
  };
}

然后组件里这样使用：

<script>
  import { classes, conditionalAction } from "./functions.js";
  export let originalClasses;
</script>

<button use:{conditionalAction(classes, originalClasses)}>Button</button>

这种方式适合需要复用条件控制逻辑的场景，原action代码完全不用动，非常灵活。

方案3：条件渲染不同元素（适合简单场景） #

如果你的按钮内容非常简单，也可以直接用Svelte的{#if}块渲染不同的按钮元素：

<script>
  import { classes } from "./functions.js";
  export let originalClasses;
</script>

{#if originalClasses}
  <button use:classes>Button</button>
{:else}
  <button>Button</button>
{/if}

不过这种方式如果元素内容复杂的话会导致代码重复，所以更适合简单元素的场景。

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