Astro中如何在JSX的<script>元素内解析表达式？

问题场景 #

在Astro组件BaseHead.astro中编写Schema.org的JSON-LD脚本时，image和url字段里的JSX变量没有被解析，始终保持原始模板字符串格式，无法替换成实际值。

错误写法示例 #

<!-- 错误写法：变量未被解析 -->
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "LocalBusiness",
    "name": "Sociedad Anonima",
    "description": "Especialistas en gestión logística, almacenamiento y distribución para comercios, industrias y particulares.",
    "image": {`"${url + image}"`},
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "Dirección",
        "addressLocality": "Rafaela",
        "addressRegion": "SF",
        "postalCode": "S2300",
        "addressCountry": "AR"
    },
    "geo": {
        "@type": "GeoCoordinates",
        "latitude": "-31.205",
        "longitude": "-61.415"
    },
    "url": {"${url}"},
    "telephone": "+54-123456789",
    "openingHours": "Mo-Fr 09:00-18:00",
    "sameAs": [
        "https://www.facebook.com/tu-negocio",
        "https://www.twitter.com/tu-negocio",
        "https://www.instagram.com/tu-negocio"
    ]
}
</script>

解决方法 #

要让JSX变量被正确解析，需要将整个Schema对象用JS语法定义，再通过JSON.stringify()转换为合法的JSON字符串，插入到script标签中。这样Astro会先解析变量，再输出规范的JSON内容。

正确代码示例

---
// 先确保url和image变量已定义（可通过props、全局数据等方式获取）
const url = "你的网站根URL";
const image = "/assets/your-business-image.jpg";
---

<!-- Schema.org 正确写法 -->
<script type="application/ld+json">
{JSON.stringify({
    "@context": "http://schema.org",
    "@type": "LocalBusiness",
    "name": "Sociedad Anonima",
    "description": "Especialistas en gestión logística, almacenamiento y distribución para comercios, industrias y particulares.",
    "image": `${url}${image}`,
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "Dirección",
        "addressLocality": "Rafaela",
        "addressRegion": "SF",
        "postalCode": "S2300",
        "addressCountry": "AR"
    },
    "geo": {
        "@type": "GeoCoordinates",
        "latitude": "-31.205",
        "longitude": "-61.415"
    },
    "url": url,
    "telephone": "+54-123456789",
    "openingHours": "Mo-Fr 09:00-18:00",
    "sameAs": [
        "https://www.facebook.com/tu-negocio",
        "https://www.twitter.com/tu-negocio",
        "https://www.instagram.com/tu-negocio"
    ]
})}
</script>

关键说明 #

• 错误写法的核心问题是将JSX表达式嵌套在JSON语法中，Astro无法识别这种混合写法，导致变量未被替换。
• 使用JSON.stringify()可以确保最终输出的是符合规范的JSON字符串，同时让Astro提前解析所有JS变量，替换为实际值。
• 注意提前在组件的前置脚本块（---之间）定义好url和image变量，或者通过组件props传入这些值。

内容的提问来源于stack exchange，提问作者Lucas David Ferrero