您可以在 svelte 条件语句中添加可选的 _outer_ 标签吗？

Question

是否可以使用条件语句用可选的外部元素包装内部内容？

这是我想在有效的 Svelte 中执行的操作的示例：

<script>
  export let needs_div_wrapper;
</script>

{#if needs_div_wrapper}
  <div>
    <a>My static content!</a>
  </div>
{:else}
  <a>My static content!</a>
{/if}

这是一个无效的 Svelte 示例，演示了我想要做的事情：

...

{#if needs_div_wrapper}
  <div>
{/if}
    <a>My static content!</a>
{#if needs_div_wrapper}
  </div>
{/if}

编辑：为了清楚起见，我试图在没有内部内容的新组件的情况下完成此任务。

Answer 1

不，这是不可能的。

在这种情况下，包装器组件可能是您可以做的最干净的事情，以避免在“父”组件中重复潜在的重要标记。

据我了解，您已经找到了这个解决方案，但为了记录，我的意思是：

DivWrapper.svelte

<script>
  export let wrap = false
</script>
{#if wrap}
  <div {...$$restProps}>
    <slot />
  </div>
{:else}
  <slot />
{/if}

App.svelte

<script>
  import DivWrapper from './DivWrapper.svelte'

  export let needs_div_wrapper;
</script>

<DivWrapper wrap={needs_div_wrapper}>
  <a>My static content!</a>
</DivWrapper>