主页 / coding / 问题 / 77729105
Accepted
Paul W
Asked: 2023-12-29 04:50:39 +0800 CST

Svelte 中的条件包装元素

  • 772

Svelte 拒绝这种语法：

// conditional open link tag
{#if whatever}
  <a href="myurl">
{/if}

// 
// many lines of code for dynamic text output
//

// conditional close link tag
{#if whatever}
  </a>
{/if}

Svelte 的编译器ParseError: Unexpected block closing tag在第一个条件块上抛出：，因为它看到<a>没有匹配的</a>.

这是一种常见的需求：某些东西可能需要在某些情况下成为超链接，但在其他情况下则不需要，并且其中的内容过于复杂，无法复制粘贴，因此会出现两次。我想同样的事情可以出现在任何其他带有开始和结束标签的 html 标签上，人们希望有条件地在某些东西周围添加一个 html 包装器。

当然，可以通过为每种 html 标签创建一个条件组件并插入内部代码来实现这一点，或者通过将内部内容移动到一个函数并将其注入到 DOM 中来实现这一点{@html...}，但对于如此基本的东西来说，这些都是笨拙的解决方案而且简单。

这似乎是框架应该提供的东西。有没有一种干净的方法来做到这一点？

svelte

1 个回答

  1. Best Answer

    对于这种特定情况，解决方案很简单：只需始终使用 an<a>并创建href条件（字符串 或undefined）。An<a>不是一个链接，除非它实际上有一个href.

    一般来说，您可以创建一个通用包装组件，如下所示：

    <script>
  export let element;
  export let condition;
</script>

{#if condition}
  <svelte:element this={element} {...$$restProps}>
    <slot />
  </svelte:element>
{:else}
  <slot />
{/if}

    <Wrapper element="a" condition={...}>
  <!-- contents -->
</Wrapper>
    • 0

相关问题