试图关闭未打开的元素

Question

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

</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，“标签省略”部分，p如果遇到任何其他块级元素（例如<h3>本例中的标签），标签将自动关闭。

换句话说，<p>标签内不能有任何其他块级元素。