如何在 Svelte 3 中有条件地添加和删除`use：`属性？答案

【问题标题】：How to conditional add and remove `use:` property in Svelte 3?如何在 Svelte 3 中有条件地添加和删除`use：`属性？
【发布时间】：2021-06-26 15:13:20
【问题描述】：

有没有办法在 Svelte 3 中优雅地有条件地添加和删除 use: 属性？

例子：

<script>
    import {classes} from "./functions.js"

    export let originalClasses
</script>

<button use:classes>Button</button>

如果originalClasses 为真，有没有办法添加或删除use:classes？

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

鉴于您无法控制 classes 函数，一种方法是使用您自己的函数来包装该操作：

import classes from '....'
function classesWrap(node, useDefault = true) {
  useDefault && classes(node);
  
  return {
    update(useDefault) {
      useDefault && classes(node);
    }
  }
}

然后改用此操作：<div use:classesWrap={originalClasses}>

这很有效，当originalClasses 为假时，它不会设置默认值，而当它为真时，它将设置它们。当它开始为假并变为真时，它也会应用它们（感谢update）但是似乎一旦附加了一个动作，它就不能再次删除（这是合乎逻辑的，因为动作应该是在安装元素时运行）。这意味着从 true 变为 false 不会改变任何东西，它会保留默认类。

有两种（非常糟糕的）解决方法：

在更新函数中添加一些额外的代码来自己删除类：

update(useDefault) {
  useDefault && classes(node);
  !useDefault && node.classList.remove(...node.classList);
}

（但这会删除所有类，以及您可能自己添加的类）

第二种选择是使用基于originalClasses 的{#key} 块包装元素，这将在它发生变化时强制重新渲染。

{#key originalClasses}
 <div use:classesWrap={originalClasses}>...</div>
{/key}

但是如果这个 div 有很多内容，这可能会非常昂贵，也许对于单行元素来说可能没问题。

（注意：您不再需要 update 功能）

当然，这是假设 originalClasses 可以并且将会改变，如果您 100% 确定它永远不会改变，只需使用没有更新或关键块的包装器。

【讨论】：

【解决方案2】：

这是你想要做的吗？

REPL

//functions.js
export default function classes(node,options){
    if(options){
    node.className="myClass";
    }
        console.log(node);
}

【讨论】：

【解决方案3】：

Svelte 中的动作可以接收一个参数，您可以使用该参数来启用或禁用效果：

https://svelte.dev/docs#use_action

【讨论】：