使用Gatsby构建组件时遇',' expected.ts(1005)解析错误求助

问题原因 #

React组件的return语句要求返回单个根元素，你直接在return()里写{data.dataYaml.Carresources.map(...)}，语法上会被识别为对象字面量而非JSX表达式，导致TS解析报错。另外，script标签内的JSON对象需要正确序列化为字符串，否则会渲染异常。

修复方案 #

1. 添加根容器（Fragment） #

用React的Fragment（短语法<>...</>）包裹map生成的所有script标签，满足React单根元素的要求。

2. 正确序列化JSON #

使用JSON.stringify()将对象转为合法的JSON字符串，确保script标签内的内容符合application/ld+json格式。

修复后的代码 #

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const Carresources = () => {
  const data = useStaticQuery(graphql`
    query CarresourcesQuery {
      dataYaml {
        Carresources {
          title
        }
      }
    }
  `)
  return (
    <>
      {data.dataYaml.Carresources.map((node, index) => (
        <script 
          key={index}
          type="application/ld+json"
        >
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Car",
            "name": node.title
          })}
        </script>
      ))}
    </>
  )
}

export default Carresources

额外说明 #

• 给每个map生成的元素添加key属性，符合React列表渲染的要求，避免控制台警告。
• 直接在script标签内写对象会导致React将其转为[object Object]，必须用JSON.stringify序列化后才能正确渲染为JSON字符串。

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