在 Gatsby React 页面中添加带有 <script> 的原始 HTML

Question

我正在尝试将外部嵌入代码添加到我的 Gatsby 页面。

我现在用

import React from 'react'
import Link from 'gatsby-link'


let test ="<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));
</script>"

const ContactPage = () => (

    <div>
        <h1>ContactPage</h1>
        <div
            dangerouslySetInnerHTML={{ __html: test }}
          />
    </div>

)

export default ContactPage

里面充满了语法错误。能否请您指出一种在反应组件中包含原始 sn-ps 的更好方法？

在 Gatsby 中是否还有一个地方可以添加所有其他脚本，例如自定义脚本、Google Analytics、图标字体、animate.js 以及我可能需要的任何其他内容？

感谢您的帮助

Answer 1

一种方法（也许是首选方法）是使用 SSR 文件。

来自docs：

文件 gatsby-ssr.js 允许您更改静态 HTML 文件的内容 因为它们正在被 Gatsby 和 Node.js 进行服务器端渲染 (SSR)。到 使用 Gatsby SSR API，在 您网站的根目录。导出您希望在此使用的任何 API 文件。

如何做到这一点的教程是here。

它使用setHeadComponents方法注入到html.js中：

setHeadComponents

它将一个组件数组作为其第一个参数，在构建期间将添加到头组件，并将其传递给 html.js。

Answer 2

还有另一种方法，就是创建 React 的效果：

import { useEffect } from 'react'

const useGoogleAnalytics = () => {

    useEffect(() => {
        // GA Snippet
    }, [])

    return null
}

然后您可以在要包含的页面组件中使用useGoogleAnalytics()。

这样做的主要优点是：

• 你得到了代码的翻译
• 维护更复杂的代码比在模板文字中更容易。

对于像 Google Analytics 这样的简单脚本，我会选择模板文字，但对于自定义和主题可更改的 sn-p，我更喜欢效果。只要您不滥用这些，它就不会影响性能，也不会产生开销。

有没有人看到这种其他方法的其他缺点？

Answer 3

您可以通过多种方式将外部脚本（没有 npm 模块）注入到 gatsby.js 项目中。更喜欢为“web-analytics”脚本使用各自的 gatsby-plugin。

使用require()：

• 在你的项目中创建一个文件myScript.js并粘贴脚本内容

• 添加const myExtScript = require('../pathToMyScript/myScript')
  到render() 内和return() 之前Pages 文件夹中的statefull 组件，如果您想仅在该页面上执行该脚本（ =页面/组件范围）。

  export default class Contact extends React.Component {  
    render() {  
     const myExtScript = require('../pathToMyScript/myScript')  
      return (
        ........       
                 )}
  

• 如果您想在全局范围（=在每个页面/组件中）执行脚本：
  添加到html.js

  <script dangerouslySetInnerHTML= {{ __html: ` 
      putYourSciptHereInBackticks `}} />`  
  

  在关闭</body> 之前。最好在这个组件上操作/监控你的全局范围，因为它有这个特定的目的……将 html 注入全局的每个页面/路由。

• 在全局范围注入的另一种方法是在组件声明之前使用require()。 这会起作用，但这不是一个好习惯，因为您的组件不应该在全局范围内注入任何东西。

   const myExtScript = require('../pathToMyScript/myScript')  
  
     export default class Contact extends React.Component {  
      render() {  
        return (
        ........       
                 )}
  

附：抱歉，如果没有正确编辑答案。这是我在 StackOverflow 上的第一个答案。

Answer 4

使用React-Helmet

第一个import Helmet from 'react-helmet'

在您的div 中，您可以这样做

<Helmet>
<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));
</script>
</Helmet>

Answer 5

显然使用多行 JS 语法可以解决问题，如

let test = "<script type='text/javascript'>\
(function(d, s) {\
    var useSSL = 'https:' == document.location.protocol;\
    var js, where = d.getElementsByTagName(s)[0],\
    js = d.createElement(s);\
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);\
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }\
}(document, 'script'));\
</script><div id='pph-hireme'></div>"

或者，你可以这样做

let test2 = `
<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);\
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }\
}(document, 'script'));
</script><div id='pph-hireme'></div>
`

欢迎更多的cmets