React项目中JSON-LD Schema双引号编码问题求助

这问题我之前做项目时也踩过坑！React出于安全考虑，默认会自动转义所有插入到JSX中的字符串内容，所以你直接把API拿到的Schema字符串塞到<script>标签里时，双引号就会被转换成HTML实体"，导致生成的JSON-LD不符合规范，无法被搜索引擎正确识别。

下面给你两种靠谱的解决办法：

方法一：使用dangerouslySetInnerHTML绕过转义 #

这是最直接的方案，通过dangerouslySetInnerHTML可以让React直接把原始字符串插入到DOM中，不会进行转义处理。不过要注意：必须确保API返回的Schema内容是完全可信的，避免注入恶意代码引发XSS攻击。

示例代码：

import { useEffect, useState } from 'react';

export default function JsonLDSchema() {
  const [schemaString, setSchemaString] = useState('');

  useEffect(() => {
    // 模拟从API获取Schema字符串
    fetch('/api/your-schema-endpoint')
      .then(response => response.text())
      .then(rawSchema => setSchemaString(rawSchema))
      .catch(err => console.error('获取Schema失败:', err));
  }, []);

  // 只有当Schema存在时才渲染script标签
  return schemaString ? (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: schemaString }}
    />
  ) : null;
}

方法二：先解析JSON再重新序列化（推荐如果API返回JSON对象时用） #

如果你的API返回的是JSON格式的对象（而不是直接的字符串），可以先把它解析成JavaScript对象，再用JSON.stringify重新转换成字符串，这样生成的字符串会是标准的JSON格式，再配合dangerouslySetInnerHTML使用就万无一失了。

示例代码：

import { useEffect, useState } from 'react';

export default function JsonLDSchema() {
  const [schemaString, setSchemaString] = useState('');

  useEffect(() => {
    fetch('/api/your-schema-endpoint')
      .then(response => response.json()) // 直接解析为JSON对象
      .then(schemaObj => setSchemaString(JSON.stringify(schemaObj)))
      .catch(err => console.error('获取Schema失败:', err));
  }, []);

  return schemaString ? (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: schemaString }}
    />
  ) : null;
}

避坑提醒 #

千万别直接把字符串写到JSX的<script>标签内容里，比如这样：

// ❌ 错误写法：会导致双引号被转义
<script type="application/ld+json">{schemaString}</script>

这种写法下React会自动转义所有特殊字符，双引号就会变成"，完全不符合JSON-LD的要求。

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