在 <p> 标签中包含一个 link，其内容来自 Svelte 中的 JSON

Question

我是 Svelte 和 Sapper 的新手，我正在将其用于我的新项目。实现的一部分涉及制作多张卡片，我在本节的 JSON 中为其声明数据，然后使用迭代创建多张卡片。

我需要在段落中包含一个 link，但我找不到解决方法。换句话说，我的代码基本上是这样的 -

<script>
   let cards = [
      {
         paragraphText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      },
      {
         paragraphText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is where my link goes <a href="xyz.com">HYPERLINK</a>"
      }

   ]
</script>

{#each cards as card}
   <div class="card">
      <p>{card.paragraphText}</p> <!-- This is the paragraph that contains a hyperlink anchor tag inside it -->
   </div>
{/each}

Answer 1

您应该能够使用 @html 助手来呈现 HTML 内容：

{#each cards as card}
   <div class="card">
      <p>{@html card.paragraphText}</p> <!-- This is the paragraph that contains a hyperlink anchor tag inside it -->
   </div>
{/each}

在 <p> 标签中包含一个 link，其内容来自 Svelte 中的 JSON

Including a link in a <p> tag that sources its content from JSON in Svelte

html

javascript

json

svelte