Javascript 使用<；添加原始HTML；脚本>；盖茨比内部反应页面

我正在尝试向我的盖茨比页面添加外部嵌入代码

我目前使用

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

从“React”导入React
从“盖茨比链接”导入链接
让测试=”
（功能（d、s）{
var usesssl='https:'==document.location.protocol；
var js，其中=d.getElementsByTagName[0]，
js=d.createElement；
js.src=（usesssl？'https:'：'http:'）+'//www.peopleperhour.com/hire/1002307300/1213788.js？width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt（Math.random（）*10000,10）；
尝试{where.parentNode.insertBefore（js，where）；}catch（e）{if（控制台的类型！=='undefined'&&console.log&&e.stack）{console.log（e.stack）；}
}（文件“脚本”）；
"
const ContactPage=（）=>(
联系页
)
导出默认联系人页面

它充满了语法错误。您能指出一种更好的方法将原始代码片段包含在react组件中吗

盖茨比有没有其他地方可以添加所有其他脚本，如自定义脚本、谷歌分析、图标字体、animate.js以及我可能需要的任何其他脚本

---

感谢您的帮助

显然使用了多行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 test=”\
（功能（d、s）{\
var usesssl='https:'==document.location.protocol\
var js，其中=d.getElementsByTagName[0]\
js=d.createElement\
js.src=（usesssl？'https:'：'http:'）+'//www.peopleperhour.com/hire/1002307300/1213788.js？width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt（Math.random（）*10000,10）\
尝试{where.parentNode.insertBefore（js，where）；}catch（e）{if（控制台的类型！=='undefined'&&console.log&&e.stack）{console.log（e.stack）；}\
}（文件“脚本”）\
"

或者，你也可以这样做

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>
`

让test2=`
（功能（d、s）{
var usesssl='https:'==document.location.protocol；
var js，其中=d.getElementsByTagName[0]，
js=d.createElement；
js.src=（usesssl？'https:'：'http:'）+'//www.peopleperhour.com/hire/1002307300/1213788.js？width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt（Math.random（）*10000,10）\
尝试{where.parentNode.insertBefore（js，where）；}catch（e）{if（控制台的类型！=='undefined'&&console.log&&e.stack）{console.log（e.stack）；}\
}（文件“脚本”）；
`

欢迎更多评论使用

首先

从“react Helmet”导入头盔

在
div中，您可以这样做



（功能（d、s）{
var usesssl='https:'==document.location.protocol；
var js，其中=d.getElementsByTagName[0]，
js=d.createElement；
js.src=（usesssl？'https:'：'http:'）+'//www.peopleperhour.com/hire/1002307300/1213788.js？width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt（Math.random（）*10000,10）；
尝试{where.parentNode.insertBefore（js，where）；}catch（e）{if（控制台的类型！=='undefined'&&console.log&&e.stack）{console.log（e.stack）；}
}（文件“脚本”）；
您可以通过多种方式将外部脚本（没有npm模块）注入gatsby.js项目。更喜欢使用各自的盖茨比插件进行“网络分析”脚本

使用
require（）
：


在项目中创建一个文件
myScript.js
并粘贴脚本内容
添加
const myExtScript=require（'../pathToMyScript/myScript'）


如果您希望仅在该页面执行脚本，请在
render（）
内的Pages文件夹和
return（）
之前执行statefull组件（=页面/组件范围）

导出默认类Contact.Component{
render（）{
const myExtScript=require（'../pathToMyScript/myScript'）
返回(
........       
)}

如果要在全局范围内执行脚本（=在每个页面/组件中）：

将其添加到
html.js

`

在关闭
之前，最好在此组件上操作/监视您的全局范围，因为它有一个特定的目的…将html全局注入每个页面/路由

在全局范围内注入的另一种方法是在组件声明之前使用
require（）
。这会起作用，但不是一种好的做法，因为组件不应该全局注入任何内容

const myExtScript=require（'../pathToMyScript/myScript'）
导出默认类联系人。组件{
render（）{
返回(
........       
)}


请注意，如果没有正确编辑答案，很抱歉。这是我在StackOverflow的第一个答案。
一种方法——可能是首选方法——是使用SSR文件

从：

文件gatsby-ssr.js允许您更改静态HTML文件的内容
因为它们是由Gatsby和Node.js.To在服务器端渲染（SSR）的
使用Gatsby SSR API，在
您的站点的根目录。导出您希望在此目录中使用的任何API
文件

关于如何做到这一点的教程是

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

setHeadComponents

它将一个组件数组作为其第一个参数，该参数将在构建期间添加到head组件，并将传递到html.js。
还有另一种方法，即创建React的效果：

import { useEffect } from 'react'

const useGoogleAnalytics = () => {

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

    return null
}

然后可以在要包含的页面组件中使用
useGoogleAnalytics（）

这样做的主要优点是：


你得到了代码的透明化
对于更复杂的代码，它比在模板文本中更容易维护

对于像Google Analytics这样的简单脚本，我会选择一个模板文本，但对于custom和subject to change片段，我更喜欢一个模板文本