Astro组件中如何在页面body输出接口返回的HTML代码

我明白你遇到的问题啦——你在MyScript.astro组件里通过fetch请求接口，拿到了一段带script标签的HTML字符串，想把它直接渲染在页面的body里，而不是当成普通文本输出对吧？

先看看你现有的请求代码，已经正确从接口拿到了html字段：

// MyScript.astro
---
const { prop1, prop2 } = Astro.props;

const response = await fetch(import.meta.env.API_URL, {
  method: 'POST',
  headers: new Headers({
    'Content-Type': 'application/json',
    'My-Key': import.meta.env.API_KEY,
  }),
  body: JSON.stringify({
    prop1,
    prop2
  }),
});

const { html } = await response.json();
---

要把这段HTML字符串直接渲染到页面body里，你找到的方法其实是完全正确的：

<Fragment set:html={html} />

这里给你稍微补充下细节：

• set:html是Astro的内置指令，专门用来将字符串形式的HTML直接解析并渲染到页面上，刚好匹配你的需求；
• 用Fragment的好处是它不会在页面上生成额外的包裹元素，能让接口返回的HTML直接插入到你放置这个Fragment的位置，非常干净。

备注：内容来源于stack exchange，提问作者meez