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.

  • Cómo manejar la request de envío en la aplicación Isomorphic React + React Router
  • React-router: utilizando <Link> como fila de tabla de datos cliqueable
  • ¿Puedo ejecutar una function después de que setState haya terminado de actualizarse?
  • Cómo acceder al context del canvas en React
  • Redux - networkinguctores / creadores de acciones no vinculados correctamente al componente
  • Rendimiento de input de React.js
  • ¿Cómo se puede usar CKEditor con React.js de una manera que permita a React reconocerlo?
  • React show routes si se configura con reactjsr-enrutador
  • ¿Cuál es la diferencia entre func () => {} y func = () => {} en class?
  • Instancia v variables de estado en react.js
  • ¿Cómo puedo bloquear un componente React para que se muestre hasta que haya obtenido toda la información?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.