将 markdown 作为 prop 传递给 Astro 组件的最佳方式是什么

Question

我正在尝试做什么

当使用 .compiledContent （甚至使用 .rawContnent）将 markdown 文件作为字符串传递到另一个组件时，有一种简单的方法来呈现它的内容吗？或者甚至比这更好的方法，显然在 Astro 中我们通常可以使用<Content /> Component，但据我所知，如果不在父组件中使用 <slot /> ，我无法将组件或此功能传递给另一个组件成分。

我有一些用于父组件的 JS，并且使用 <slot/> 而不是将 props 传递给组件会改变事情，所以希望寻找使用它的解决方案。

我的设置

• 数据存储在/src/data/experienceMarkdown 文件中，其中包含年份和每个文件内容部分中格式化为 Markdown 的说明
• 一个名为的组件Tabs.astro，它采用标题和内容的属性，它们都是字符串列表
• /src/pages/experience.astro包含显示此数据的选项卡组件的页面

我使用下面的代码从 Markdown 文件中获取数据，并将年份和描述传递给选项卡组件。

experience.astro

---
import Tabs from "../components/Tabs.astro";

const jobs = await Astro.glob("../data/experience/*.md");
const years = jobs.map((job) => job.frontmatter.year);
const descriptions = jobs.map((job) => job.compiledContent);
---
<!-- My component taking the data to be rendered -->
<Tabs headings={years} contents={descriptions} />

Tabs.astro

该组件像这样呈现信息

<!-- Tabs -->
<div class="tabs">
  <ul class="tabs-header">
    {
      headings.map((heading) => (
        <li>{heading}</li>
      ))
    }
  </ul>
  <ul class="tabs-content">
    {contents.map((content) => <li class="tab">{content}</li>)}
  </ul>
</div>

我目前的解决方案

目前，使用.compiledContent可以让我获得正确的 HTML，但它全部位于字符串中，因此 HTML 实际上不会呈现。

我在寻找什么

• Astro 中是否有一种本地方法可以将 markdown 作为 prop 传递给组件？
• 如果没有，Astro 中是否有手动和推荐的方法来转换 Markdown 字符串并对其进行清理以防止 XSS 攻击？（如果静态渲染时 Astro 存在风险？）
• 如果不是，你最推荐的在 JS 中渲染 markdown 和清理它的方法是什么？

非常感谢您的时间和帮助！我喜欢使用 Astro

ps 也很高兴承认并在需要时在我的组件中使用 <slot/>...;)

Answer 1

Astro 有一个set:html指令，您可以与这样的 Fragment 结合使用

<Fragment set:html={post.compiledContent()}/>