苗条的条件属性渲染

Question

这里有点像薄冰，但我正在尝试有条件地将 on: 指令呈现为这样。

<li
  class="badge"
  animate:flip={{ delay: 0, duration: 250, easing: quintOut }}
  {...isBadgesClickable && {
    ['on:click']: onBadgeClick()
  }}
></li>

我想要做的是有条件地呈现多个属性和/或指令。我知道上面的例子是行不通的，但我该怎么做才能达到上述逻辑？

Answer 1

Svelte 不允许您传播这样的指令。假设 onBadgeClick 是您要在点击时运行的函数，您可以执行以下操作：

<li
  class="badge"
  animate:flip={{ delay: 0, duration: 250, easing: quintOut }}
  on:click={isBadgesClickable && onBadgeClick}
></li>

但请注意，当 isBadgesClickable 为 false 时，仍会向元素添加点击事件处理程序。它只会在 isBadgesClickable 为真时运行。

此外，由于可访问性，通常不鼓励向 <li> 添加点击事件，而 <button> 通常更合适。确保您可以通过键盘与元素进行交互，并且屏幕阅读器可以正确识别该元素。