Astro组件中如何将JS字符串内的HTML标签转为可渲染HTML

Astro默认会对插值字符串做HTML转义处理，所以直接在字符串里写<strong>这类标签会被当成纯文本输出。要让标签被解析为可渲染的HTML，需要使用Astro提供的set:html指令。

修改你的渲染代码如下：

---
const { title, subtitle, characteristics } = Astro.props;
---

<p class="title">{title}</p>
<p class="subtitle">{subtitle}</p>

{characteristics?.map((item) => (
  <p class="text" set:html={item}></p>
))}

修改后，characteristics数组中带HTML标签的字符串就能被正确解析渲染，比如<strong>characteristic1</strong>会显示为加粗的文本。

注意：使用set:html时要确保内容是可信的（比如是你自己维护的产品特性文本），避免引入XSS安全风险。如果内容包含用户输入，需要先做HTML转义处理。

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