web-dev-qa-db-fra.com

ajouter du HTML brut avec <script> dans la page de Gatsby React

J'essaie d'ajouter un code d'intégration externe à ma page Gatsby.

J'utilise actuellement

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

qui est plein d'erreurs de syntaxe. Pouvez-vous s'il vous plaît indiquer un meilleur moyen d'inclure des extraits bruts dans un composant de réaction?

Existe-t-il également un endroit dans Gatsby pour ajouter tous les scripts supplémentaires tels que les scripts personnalisés, Google Analytics, les polices d'icônes, animate.js et tout ce dont j'ai besoin?

Merci pour l'aide

javascriptreactjsgatsby
5
Giannis Dallas

Vous pouvez injecter des scripts externes (sans modules npm) au projet gatsby.js de plusieurs manières. Préférez utiliser le plugin gatsby respectif pour les scripts "d'analyse Web".

Utilisation de require():

  • Créez un fichier dans votre projet myScript.js et collez le contenu du script

  • Ajouter const myExtScript = require('../pathToMyScript/myScript')
    vers un statefull composant dans le dossier Pages dans render() et avant return() si vous souhaitez exécuter ce script uniquement à cette page (= portée de la page/du composant). 

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

  • Si vous souhaitez exécuter un script dans la portée globale(= dans chaque page/composant):
    l'ajouter dans html.js 

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

    avant de fermer le </body>. Il est préférable de manipuler/surveiller votre portée globale au niveau de ce composant car il a cet objectif spécifique ... d’injecter du code HTML dans chaque page/route de manière globale.

  • Une autre façon d’injecter à l’échelle global consiste à utiliser require() avant la déclaration du composant. Cela fonctionnera mais ce n'est pas une bonne pratique, car vos composants ne doivent rien injecter de manière globale.

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

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

P.S. Désolé si la réponse n'est pas modifiée correctement. C'est ma première réponse chez StackOverflow.

10
AndreasT

Utilisez React-Helmet

Premier import Helmet from 'react-helmet'

Dans votre div vous pouvez faire comme ceci 

<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

Apparemment, l’utilisation d’une syntaxe multiligne JS a été efficace, comme dans

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

alternativement, vous pouvez faire

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

Tous les commentaires sont les bienvenus

1
Giannis Dallas