AstroJS如何显示data集合类型JSON数据中的HTML内容？

在Astro里渲染带HTML标签的JSON内容，核心用Astro原生的set:html指令即可，替代React里的dangerouslySetInnerHTML，具体操作分两种场景：

1. 在Astro原生组件中渲染 #

假设你的JSON数据（Astro data集合）结构如下：

// src/data/articles.json
[
  {
    "id": "1",
    "body": "<h3>示例标题</h3><p>这是包含<em>斜体</em>和<a href='#'>链接</a>的HTML内容</p>"
  }
]

在Astro组件中导入并渲染：

---
// 导入JSON数据
import articles from '../data/articles.json';
// 取第一条数据
const article = articles[0];
---

<!-- 使用set:html指令渲染HTML内容 -->
<div class="article-content" set:html={article.body}></div>

2. 在Astro中使用React组件渲染 #

如果项目里混用React组件，也可以继续用你熟悉的dangerouslySetInnerHTML：
先写React组件：

// src/components/HTMLContent.jsx
export default function HTMLContent({ htmlString }) {
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

然后在Astro组件中引入使用：

---
import HTMLContent from '../components/HTMLContent.jsx';
import articles from '../data/articles.json';
const article = articles[0];
---

<HTMLContent htmlString={article.body} />

注意事项 #

不管用哪种方式，都要注意XSS安全风险——只有当内容是你可控的可信来源（比如自己维护的JSON数据）时，才用这种方式渲染，避免渲染用户提交的未知内容。

内容的提问来源于stack exchange，提问作者Casey