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

【问题标题】：Can you add optional _outer_ tags in svelte conditional statement?你可以在 svelte 条件语句中添加可选的 _outer_ 标签吗？
【发布时间】：2020-11-28 19:03:47
【问题描述】：

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

这是我想在有效 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>
{:else}

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

【问题讨论】：

标签： svelte

【解决方案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>

【讨论】：