Svelte 条件属性渲染

Question

这里有点如履薄冰，但我正在尝试有条件地呈现 on: 指令。

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

我想做的是有条件地呈现多个属性 and/or 指令。我知道上面的例子行不通，但我应该如何去做才能实现所说的逻辑？

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> 通常更合适。确保您可以使用键盘与该元素进行交互，并且屏幕阅读器可以正确识别它。

Svelte 条件属性渲染

Svelte conditonal attribute render

typescript

svelte