试图关闭未打开的元素

Question

我在 Svelte 中获得了以下代码。它在没有 <p> 标签的情况下工作，但是当我将 {#if}...{/if} 放在 <p> 标签中时，我在最后一行收到以下错误并且应用程序无法编译。

试图关闭未打开的元素

<p>
   <h3>Active games</h3>
   {#if !Array.isArray(games)}
      <span>Loading...</span>
   {:else if games.length === 0}
      <span>None</span>
   {:else}
      {#each games as game (game.id)}
         <a href={'/game/' + game.id}>{game.name}</a><br>
      {/each}
   {/if}
</p>

导致错误的原因是什么？

Answer 1

参见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p， "Tag omission" 部分，如果遇到任何其他块级元素，p 标签将自动关闭，例如本例中的 <h3> 标签。

换句话说，您不能在 <p> 标记内包含任何其他块级元素。

试图关闭未打开的元素

Attempted to close an element that was not open

html

svelte