JSX语法下数组映射生成Review结构化数据报错求助

我在使用JSX语法构建页面时，试图通过数组映射将评论数据动态添加到Review类型的Schema结构化数据中，但当前写法导致JSX语法无效。不确定这种实现方式是否正确，或是需要提前在函数中处理好数据再调用。

静态评论的可运行代码（参考） #

<MetaTags>
    { this.state.name ? (
        <script type="application/ld+json">
        {`
            {
                "@context": "https://schema.org/",
                "@type": "LocalBusiness",
                "aggregateRating": {
                "@type": "AggregateRating",
                    "ratingValue": "${this.state.rating}",
                    "ratingCount": "${this.state.voters}"
                },
                "review": [
                    {
                        "@type": "Review",
                        "author": "Ellie",
                        "datePublished": "2011-04-01",
                        "reviewBody": "灯泡烧坏了，现在我得换一个。",
                        "name": "不太满意",
                        "reviewRating": {
                          "@type": "Rating",
                          "bestRating": "5",
                          "ratingValue": "1",
                          "worstRating": "1"
                        }
                    },
                    {
                        "@type": "Review",
                        "author": "Ellie",
                        "datePublished": "2011-04-01",
                        "reviewBody": "灯泡烧坏了，现在我得换一个。",
                        "name": "不太满意",
                        "reviewRating": {
                          "@type": "Rating",
                          "bestRating": "5",
                          "ratingValue": "1",
                          "worstRating": "1"
                        }
                    }
                ]
            }
        `}
        </script>
    ) : ''}
</MetaTags>

失败的动态尝试代码 #

我尝试用{``}模板字符串包裹map函数来动态生成评论数组，但写法无效：

"review": [
    {` 
        this.state.posts ? this.state.posts.slice(0, 10).map(data => (
            {
                "@type": "Review",
                "author": "Ellie",
                "datePublished": "2011-04-01",
                "reviewBody": "灯泡烧坏了，现在我得换一个。",
                "name": "不太满意",
                "reviewRating": {
                    "@type": "Rating",
                    "bestRating": "5",
                    "ratingValue": "1",
                    "worstRating": "1"
                }
            },
        )) : '';
    `}
]

解决方法 #

问题出在直接在模板字符串中编写map逻辑，这种写法会把代码当作纯字符串输出，而非执行后生成合法的JSON结构。正确做法是提前构建完整的结构化数据对象，再转为JSON字符串插入script标签。

修正后的代码 #

<MetaTags>
  {this.state.name && (
    <script type="application/ld+json">
      {JSON.stringify({
        "@context": "https://schema.org/",
        "@type": "LocalBusiness",
        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": this.state.rating,
          "ratingCount": this.state.voters
        },
        "review": this.state.posts
          ? this.state.posts.slice(0, 10).map(data => ({
              "@type": "Review",
              "author": data.author || "Ellie",
              "datePublished": data.datePublished || "2011-04-01",
              "reviewBody": data.reviewBody || "灯泡烧坏了，现在我得换一个。",
              "name": data.reviewTitle || "不太满意",
              "reviewRating": {
                "@type": "Rating",
                "bestRating": "5",
                "ratingValue": data.rating || "1",
                "worstRating": "1"
              }
            }))
          : []
      })}
    </script>
  )}
</MetaTags>

核心要点 #

• 用JSON.stringify将JS对象直接转为合法JSON字符串，避免手动拼接模板字符串的语法错误；
• 在对象内部直接使用map处理评论数组，确保生成的结构符合JSON规范；
• 处理posts为空的情况时返回空数组，而非空字符串，保证JSON结构完整；
• 可根据data中的真实字段替换示例固定值，适配实际业务数据。

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