如何在 Reactjs 中添加丰富的代码片段？

Posted 2023-02-22

【中文标题】如何在 Reactjs 中添加丰富的代码片段？

【英文标题】：How can I put rich snippet codes in Reactjs?

【发布时间】：2019-04-05 23:40:45

【问题描述】：

我正在尝试将基于 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>

我研究了如何做到这一点，但它们都可以与 NPM 的一些第三方插件一起使用。由于我仍然是 React 的初学者，任何人都可以推荐将丰富的 sn-p 代码放入 Reactjs 的最佳方法是什么？

【参考方案1】：

JSON-LD 应该在外部使用，主要由搜索引擎使用。

<script type="application/ld+json"> 标签与应用程序本身无关，不应成为 React 应用程序的一部分，除非另有证明。

【讨论】：

我以前直接把sn-p的代码放在html文件上，效果很好。所以，我希望它在 React 中也能很好地工作。无论如何，我应该使用第三方插件之一吗？能给我推荐一个吗？

继续这样做是个好主意。这个 sn-p 应该是静态的，因为它是为搜索引擎设计的。搜索引擎不会呈现 React 应用程序。目前只有 Google 能够渲染 JS，而且效果并不好。如果您想动态生成此 sn-p，请在服务器端执行此操作。