it-swarm.com.de

fügen Sie HTML-Code mit <script> auf der Gatsby React-Seite hinzu

Ich versuche, meiner Gatsby-Seite einen externen Einbettungscode hinzuzufügen.

Ich verwende derzeit

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

das ist voll von Syntaxfehlern. Können Sie uns einen besseren Weg zeigen, um rohe Snippets in eine React-Komponente aufzunehmen?

Gibt es alternativ einen Platz in Gatsby, um alle zusätzlichen Skripts hinzuzufügen, z. B. benutzerdefinierte Skripts, Google Analytics, Symbolzeichensätze, animate.js und alles andere, was ich brauche?

Danke für die Hilfe

5
Giannis Dallas

Sie können externe Skripts (ohne npm-Module) auf vielfältige Weise in das Projekt gatsby.js einfügen. Verwenden Sie vorzugsweise das entsprechende Gatsby-Plugin für "Web-Analytics" -Skripts.

require() verwenden:

  • Erstellen Sie eine Datei in Ihrem Projekt myScript.js und fügen Sie den Skriptinhalt ein
  • const myExtScript = require('../pathToMyScript/myScript') hinzufügen
    zu einer statefull-Komponente im Pages-Ordner in render() und vor return(), wenn Sie das Skript nur auf dieser Seite (= page/component) ausführen möchten Umfang). 

    export default class Contact extends React.Component {  
      render() {  
       const myExtScript = require('../pathToMyScript/myScript')  
        return (
          ........       
                   )}
    
  • Wenn Sie ein Skript im globalen Gültigkeitsbereich (= in jeder Seite/Komponente) ausführen möchten:
    füge es in html.js hinzu 

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

    bevor der </body> geschlossen wird. Es ist besser, Ihren globalen Gültigkeitsbereich an dieser Komponente zu manipulieren/zu überwachen, da diese spezielle Aufgabe darin besteht, HTML für jede Seite/Route global zu injizieren.

  • Eine andere Möglichkeit, am globaler Bereich zu injizieren, ist require() vor der Komponentendeklaration. Das wird funktionieren, aber es ist keine gute Praxis, da Ihre Komponenten nichts global injizieren sollten.

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

P.S. Sorry, wenn die Antwort nicht richtig bearbeitet wurde. Dies ist meine erste Antwort bei StackOverflow.

10
AndreasT

Verwenden Sie React-Helm

Erster import Helmet from 'react-helmet'

In Ihrer div können Sie dies tun 

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

4
Mohit Bajoria

Anscheinend hat die Verwendung einer mehrzeiligen JS-Syntax den Trick, wie in

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

alternativ können Sie tun

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

Weitere Kommentare sind willkommen

1
Giannis Dallas