Tengo un problema relativamente sencillo al tratar de agregar secuencias de comandos en línea a un componente React. Lo que tengo hasta ahora:

'use strict';

import '../../styles/pages/people.scss';

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

import { prefix } from '../../core/util';

export default class extends Component {
    render() {
        return (
            <DocumentTitle title="People">
                <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
                    <h1 className="tk-brandon-grotesque">People</h1>

                    <script src="https://use.typekit.net/foobar.js"></script>
                    <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
                </article>
            </DocumentTitle>
        );
    }
};

También he intentado:

<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Ninguno de los enfoques parece ejecutar el script deseado. Supongo que es algo simple que me estoy perdiendo. ¿Alguien puede ayudar?

PD: Ignora el foobar, tengo una identificación real realmente en uso que no tenía ganas de compartir.

Editar: las cosas cambian rápido y esto está desactualizado - ver actualización

¿Desea buscar y ejecutar el script una y otra vez, cada vez que se representa este componente, o solo una vez cuando este componente se monta en el DOM?

Quizás intente algo como esto:

componentDidMount () {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

Sin embargo, esto solo es realmente útil si el script que desea cargar no está disponible como módulo / paquete. Primero, siempre:

• Busque el paquete en npm
• Descargue e instale el paquete en mi proyecto ( npm install typekit)
• importel paquete donde lo necesito ( import Typekit from 'typekit';)

Esta es probablemente la forma en que instaló los paquetes reacty react-document-titlede su ejemplo, y hay un paquete Typekit disponible en npm .

Actualizar:

Ahora que tenemos ganchos, un mejor enfoque podría ser usar useEffectasí:

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
}, []);

Lo que lo convierte en un gran candidato para un gancho personalizado (por ejemplo:) hooks/useScript.js:

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};

export default useScript;

Que se puede usar así:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // rest of your component
}

Además de las respuestas anteriores, puede hacer esto:

import React from 'react';

export default class Test extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.innerHTML = "document.write('This is output by document.write()!')";
    this.instance.appendChild(s);
  }

  render() {
    return <div ref={el => (this.instance = el)} />;
  }
}

El div está vinculado thisy el script se inyecta en él.

La demostración se puede encontrar en codesandbox.io

Mi forma favorita es usar React Helmet: es un componente que permite una fácil manipulación del cabezal del documento de una manera que probablemente ya esté acostumbrado.

p.ej

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <script src="https://use.typekit.net/foobar.js"></script>
                <script>try{Typekit.load({ async: true });}catch(e){}</script>
            </Helmet>
            ...
        </div>
    );
  }
};

https://github.com/nfl/react-helmet

Si necesita tener <script>bloque en SSR (representación del lado del servidor), un enfoque con componentDidMountno funcionará.

Puedes usar react-safe biblioteca en su lugar. El código en React será:

import Safe from "react-safe"

// in render 
<Safe.script src="https://use.typekit.net/foobar.js"></Safe.script>
<Safe.script>{
  `try{Typekit.load({ async: true });}catch(e){}`
}
</Safe.script>

La respuesta que proporcionó Alex Mcmillan me ayudó más, pero no funcionó para una etiqueta de script más compleja.

Modifiqué ligeramente su respuesta para encontrar una solución para una etiqueta larga con varias funciones que además ya estaba configurando "src".

(Para mi caso de uso, el script necesitaba vivir en la cabeza, lo que también se refleja aquí):

  componentWillMount () {
      const script = document.createElement("script");

      const scriptText = document.createTextNode("complex script with functions i.e. everything that would go inside the script tags");

      script.appendChild(scriptText);
      document.head.appendChild(script);
  }

Creé un componente React para este caso específico: https://github.com/coreyleelarson/react-typekit

Solo necesita pasar su ID de Kit Typekit como accesorio y ya está listo.

import React from 'react';
import Typekit from 'react-typekit';

const HtmlLayout = () => (
  <html>
    <body>
      <h1>My Example React Component</h1>
      <Typekit kitId="abc123" />
    </body>
  </html>
);

export default HtmlLayout;

Hay una muy buena solución usando Range.createContextualFragment.

/**
 * Like React's dangerouslySetInnerHTML, but also with JS evaluation.
 * Usage:
 *   <div ref={setDangerousHtml.bind(null, html)}/>
 */
function setDangerousHtml(html, el) {
    if(el === null) return;
    const range = document.createRange();
    range.selectNodeContents(el);
    range.deleteContents();
    el.appendChild(range.createContextualFragment(html));
}

Esto funciona para HTML arbitrario y también retiene información de contexto como document.currentScript.

Puede usar npm postscribepara cargar script en el componente react

postscribe('#mydiv', '<script src="https://use.typekit.net/foobar.js"></script>')

También puedes usar reaccionar casco

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://example.com/example" />
                <script src="/path/to/resource.js" type="text/javascript" />
            </Helmet>
            ...
        </div>
    );
  }
};

Helmet toma etiquetas HTML simples y genera etiquetas HTML simples. Es muy simple, y reacciona amigable para principiantes.

para múltiples scripts, use esto

var loadScript = function(src) {
  var tag = document.createElement('script');
  tag.async = false;
  tag.src = src;
  document.getElementsByTagName('body').appendChild(tag);
}
loadScript('//cdnjs.com/some/library.js')
loadScript('//cdnjs.com/some/other/library.js')

componentDidMount() {
  const head = document.querySelector("head");
  const script = document.createElement("script");
  script.setAttribute(
    "src",
    "https://assets.calendly.com/assets/external/widget.js"
  );
  head.appendChild(script);
}

Puede encontrar la mejor respuesta en el siguiente enlace:

https://cleverbeagle.com/blog/articles/tutorial-how-to-load-third-party-scripts-dynamically-in-javascript

const loadDynamicScript = (callback) => {
const existingScript = document.getElementById('scriptId');

if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'url'; // URL for the third-party library being loaded.
    script.id = 'libraryName'; // e.g., googleMaps or stripe
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

Según la solución de Alex McMillan , tengo la siguiente adaptación.
Mi propio entorno: React 16.8+, next v9 +

// agrega un componente personalizado llamado Script
// hooks / Script.js

import { useEffect } from 'react'

const useScript = (url, async) => {
  useEffect(() => {
    const script = document.createElement('script')

    script.src = url
    script.async = (typeof async === 'undefined' ? true : async )

    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [url])
}

export default function Script({ src, async=true}) {

  useScript(src, async)

  return null  // Return null is necessary for the moment.
}

// Use el componente personalizado, simplemente impórtelo y sustituya la antigua <script>etiqueta en minúsculas por la etiqueta personalizada en camello <Script>.
// index.js

import Script from "../hooks/Script";

<Fragment>
  {/* Google Map */}
  <div ref={el => this.el = el} className="gmap"></div>

  {/* Old html script */}
  {/*<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>*/}

  {/* new custom Script component */}
  <Script src='http://maps.google.com/maps/api/js' async={false} />
</Fragment>

Llegué un poco tarde a la fiesta, pero decidí crear la mía propia después de mirar las respuestas de @Alex Macmillan y eso fue al pasar dos parámetros adicionales; la posición en la que colocar los scripts como o y configurar el asíncrono en verdadero / falso, aquí está:

import { useEffect } from 'react';

const useScript = (url, position, async) => {
  useEffect(() => {
    const placement = document.querySelector(position);
    const script = document.createElement('script');

    script.src = url;
    script.async = typeof async === 'undefined' ? true : async;

    placement.appendChild(script);

    return () => {
      placement.removeChild(script);
    };
  }, [url]);
};

export default useScript;

La forma de llamarlo es exactamente la misma que se muestra en la respuesta aceptada de esta publicación, pero con dos parámetros adicionales (nuevamente):

// First string is your URL
// Second string can be head or body
// Third parameter is true or false.
useScript("string", "string", bool);

Para importar archivos JS en el proyecto de reacción, use este comando

1. Mueva el archivo JS al proyecto.
2. importa el js a la página usando el siguiente comando

Es simple y fácil.

import  '../assets/js/jquery.min';
import  '../assets/js/popper.min';
import  '../assets/js/bootstrap.min';

En mi caso, me gustaría importar estos archivos JS en mi proyecto de reacción.

La solución depende del escenario. Como en mi caso, tuve que cargar una incrustación de calor dentro de un componente de reacción.

Calendly busca un div y lee de su data-urlatributo y carga un iframe dentro de dicho div.

Todo está bien cuando carga la página por primera vez: primero, data-urlse representa div con . Luego, el script calendly se agrega al cuerpo. El navegador lo descarga y lo evalúa y todos volvemos felices a casa.

El problema surge cuando navega y luego regresa a la página. Esta vez, el script aún está en el cuerpo y el navegador no lo vuelve a descargar ni a evaluar.

Reparar:

1. En componentWillUnmountbuscar y eliminar el elemento de script. Luego, en el montaje, repita los pasos anteriores.
2. Introduzca $.getScript. Es un ingenioso asistente de jquery que toma un URI de script y una devolución de llamada exitosa. Una vez que el script se cargó, lo evalúa y dispara su devolución de llamada exitosa. Todo lo que tengo que hacer es en mi componentDidMount $.getScript(url). Mi rendermétodo ya tiene el div calendly. Y funciona sin problemas.