如何将丰富的代码片段放入Reactjs中？

我正在尝试将基于jQuery的网站转换为基于React的网站，我需要在Reactjs中使用以下代码，但代码的格式似乎在Reactjs中不起作用

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "https://www.example.com/",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://www.example.com/search/?q={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  }
</script>

{
“@context”：”http://schema.org",
“@type”：“网站”，
“url”：”https://www.example.com/",
“潜在作用”：{
“@type”：“SearchAction”，
“目标”：https://www.example.com/search/?q={search_term_string}”，
“查询输入”：“所需名称=搜索\术语\字符串”
}
}

我研究了如何做到这一点，但它们都与来自NPM的一些第三方插件一起工作。既然我还是React的初学者，有谁能推荐一下在React JS中放置丰富代码片段的最佳方法吗？

应该是由外部使用的，主要由搜索引擎使用

---

标记与应用程序本身无关，不应成为React应用程序的一部分，除非另有证明。

我曾经将代码片段直接放在html文件中，效果很好。所以，我希望它在React中也能很好地工作。不管怎样，我应该使用第三方插件吗？你能给我推荐一个吗？继续这样做是个好主意。这个片段应该是静态的，因为它是为搜索引擎设计的。搜索引擎不会呈现React应用程序。目前只有谷歌能够呈现JS，但它做得并不好。如果要动态生成此代码段，请在服务器端执行此操作。