javascript – 在Gatsby React页面中添加原始HTML

2019-09-27 11:43:29 阅读：531 来源： 互联网

我正在尝试将外部嵌入代码添加到我的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

这充满了语法错误.您能否指出一种更好的方法将原始片段包含在反应组件中？

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

感谢您的帮助

解决方法:

您可以通过多种方式将外部脚本(没有npm模块)注入gatsby.js项目.更喜欢将“gatsby-plugin”用于“web-analytics”脚本.

使用require()：

>在项目myScript.js中创建一个文件并粘贴脚本内容
>添加const myExtScript = require(‘../ pathToMyScript / myScript’)
如果要仅在该页面(=页面/组件范围)执行该脚本,则在render()内的Pages文件夹和return()之前的一个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上的第一个答案.

标签：javascript,reactjs,gatsby
来源： https://codeday.me/bug/20190927/1823750.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 在Gatsby React页面中添加原始HTML