agregue HTML sin procesar con dentro de la página Gatsby React

Estoy intentando agregar un código de inserción externo a mi página de Gatsby.

Actualmente uso

import React from 'react' import Link from 'gatsby-link' let test =" (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')); " const ContactPage = () => ( 

ContactPage

) export default ContactPage

que está lleno de errores de syntax. ¿Podría por favor indicar una mejor manera de incluir fragmentos de código sin procesar en un componente de reacción?

¿Existe una alternativa en Gatsby para agregar todos los scripts adicionales como scripts personalizados, Google Analytics, fonts de icons, animate.js y cualquier otra cosa que pueda necesitar?

Gracias por la ayuda

3 Solutions collect form web for “agregue HTML sin procesar con dentro de la página Gatsby React”

Puede inyectar scripts externos (sin módulos npm) al proyecto gatsby.js de muchas maneras. Prefiero usar gatsby-plugin respectivo para los scripts de “analítica web”.

Utilizando require() :

  • Cree un archivo en su proyecto myScript.js y pegue el contenido del script
  • Añadir const myExtScript = require('../pathToMyScript/myScript')
    a un componente de estado en la carpeta Páginas dentro de render() y antes de return() si desea ejecutar ese script solo en esa página (= scope de página / componente).

     export default class Contact extends React.Component { render() { const myExtScript = require('../pathToMyScript/myScript') return ( ........ )} 
  • Si desea ejecutar un script en el ámbito global (= en cada página / componente):
    agregarlo en html.js

     ` 

    antes de cerrar el . Es mejor manipular / monitorear su scope global en este componente porque tiene este propósito específico ... inyectar html a cada página / ruta globalmente.

  • Otra forma de inyectar en el ámbito global es con require() antes de la statement del componente. Esto funcionará pero no es una buena práctica, ya que sus componentes no deberían inyectar nada globalmente.

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

PD Disculpe si la respuesta no se ha editado correctamente. Esta es mi primera respuesta en StackOverflow.

Usa React-Helmet

Primer import Helmet from 'react-helmet'

Dentro de tu div puedes hacer así

    

Al parecer, el uso de una syntax JS multilínea hizo el truco, como en

 let test = "
"

alternativamente, puedes hacer

 let test2 = ` 
`

Cualquier comentario adicional es bienvenido.

  • setState vs replaceState en React.js
  • Corregir el uso de React.Events en TypeScript 2.0?
  • Etiquetas de Sprite con React-Three-Renderer (MVCE incluido)
  • onEnter no llamado en React-Router
  • Manera de verificar si la primera iteración en el map
  • statement de function es6 en la class React
  • ReferencerError: Definir no está definido - Browserify
  • Semantic-UI-React, selection, multi, no se puede establecer defaultValue
  • main.jsbundle, Foundation y Security faltando en el proyecto, causando error
  • ReactJS: ¿Puedo crear mi propio SyntheticEvent?
  • Cliente Apollo (Reaccionar): event handling errores inesperados
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.