Svelte 条件属性渲染答案

【问题标题】：Svelte conditonal attribute renderSvelte 条件属性渲染
【发布时间】：2021-06-25 11:38:14
【问题描述】：

这里有点薄冰，但我试图有条件地渲染 on: 指令。

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

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

【问题讨论】：

为什么不把 li 标签包装在 if 块中，然后你可以在 if 块中使用带有 on 指令的 li，在 else 块中使用不带 on 指令的 li 标签。 .

标签： typescript svelte

【解决方案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 是不可能的。