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

Posted 2023-03-07

【中文标题】如何在 Svelte 3 中有条件地添加和删除`use：`属性？

【英文标题】：How to conditional add and remove `use:` property in Svelte 3?

【发布时间】：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？

【参考方案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