用< script>添加原始HTML Gatsby React页面中 [英] add raw HTML with <script> inside Gatsby React page

问题描述

我正在尝试向Gatsby页面添加外部嵌入代码.

I am trying to add an external embed code to my Gatsby page.

我目前正在使用

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组件中?

which is full of syntax errors. Can you please point out a better way to include raw snippets in a react component?

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

Is there alternatively a place in Gatsby to add all additional scripts like custom scripts, Google Analytics, icon fonts, animate.js and anything else I may need?

感谢您的帮助

推荐答案

您可以通过多种方式将外部脚本(不带npm模块)注入gatsby.js项目.最好将各自的gatsby插件用于网络分析"脚本.

You can inject external scripts (with no npm modules) to gatsby.js project in many ways. Prefer to use respective gatsby-plugin for "web-analytics" scripts.

使用require():

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

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

• Create a file in your project myScript.js and paste the script content

• Add const myExtScript = require('../pathToMyScript/myScript')
  to a statefull component at the Pages folder inside render() and before return() if you want to execute that script only at that page(=page/component scope).

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

如果要在全局范围(=在每个页面/组件中)中执行脚本:
将其添加到html.js

If you want to execute script in the global scope (=in every page/ component):
add it in html.js

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

，然后关闭</body>.最好在此组件上操作/监视全局作用域，因为它具有特定的目的...将html全局注入到每个页面/路由.

before closing the </body>. It is better to manipulate/monitor your global scope at this component because it has this specific purpose... to inject html to every page/route globally.

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

Another way to inject at the global scope is with require() before the component declaration. This will work but it's not a good practice, as your components shouldn't inject anything globally.

 const myExtScript = require('../pathToMyScript/myScript')  

   export default class Contact extends React.Component {  
    render() {  
      return (
      ........       
               )}

P.S.抱歉，如果答案编辑不正确.这是我在StackOverflow上的第一个答案.

P.S. Sorry if the answer is not edited properly. This my first answer at StackOverflow.

这篇关于用< script>添加原始HTML Gatsby React页面中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！