Ho un problema relativamente semplice di provare ad aggiungere script inline a un componente React. Quello che ho finora:

'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>
        );
    }
};

Ho anche provato:

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

Nessuno dei due approcci sembra eseguire lo script desiderato. Immagino sia una cosa semplice che mi manca. Qualcuno può dare una mano?

PS: Ignora il foobar, ho un vero id in uso che non mi andava di condividere.

Modifica: le cose cambiano rapidamente e questo è obsoleto - vedi aggiornamento

Vuoi recuperare ed eseguire lo script ancora e ancora, ogni volta che viene eseguito il rendering di questo componente o solo una volta quando questo componente viene montato nel DOM?

Forse prova qualcosa del genere:

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

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

    document.body.appendChild(script);
}

Tuttavia, questo è davvero utile solo se lo script che vuoi caricare non è disponibile come modulo / pacchetto. Innanzitutto, vorrei sempre:

• Cerca il pacchetto su npm
• Scarica e installa il pacchetto nel mio progetto ( npm install typekit)
• importil pacchetto dove ne ho bisogno ( import Typekit from 'typekit';)

Questo è probabilmente il modo in cui hai installato i pacchetti reacte react-document-titledal tuo esempio, e c'è un pacchetto Typekit disponibile su npm .

Aggiornare:

Ora che abbiamo hook, un approccio migliore potrebbe essere quello di utilizzare in questo useEffectmodo:

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);
  }
}, []);

Il che lo rende un ottimo candidato per un hook personalizzato (ad esempio:) 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;

Quale può essere usato così:

import useScript from 'hooks/useScript';

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

  // rest of your component
}

Oltre alle risposte sopra puoi farlo:

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)} />;
  }
}

Il div è associato thise lo script viene iniettato in esso.

La demo è disponibile su codesandbox.io

Il mio modo preferito è usare React Helmet - è un componente che consente una facile manipolazione della testina del documento in un modo a cui probabilmente sei già abituato.

per esempio

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

Se è necessario disporre di un <script>blocco in SSR (rendering lato server), un approccio con componentDidMountnon funzionerà.

Puoi react-safeinvece usare la libreria. Il codice in React sarà:

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 risposta fornita da Alex Mcmillan mi ha aiutato di più, ma non ha funzionato del tutto per un tag di script più complesso.

Ho leggermente modificato la sua risposta per trovare una soluzione per un tag lungo con varie funzioni che stava già impostando "src".

(Nel mio caso d'uso la sceneggiatura doveva vivere in testa, che si riflette anche qui):

  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);
  }

Ho creato un componente React per questo caso specifico: https://github.com/coreyleelarson/react-typekit

Ho solo bisogno di passare il tuo ID Kit di Typekit come supporto e sei a posto.

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;

C'è una soluzione molto bella 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));
}

Funziona con HTML arbitrario e conserva anche informazioni di contesto come document.currentScript.

È possibile utilizzare npm postscribeper caricare script nel componente reagire

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

Puoi anche usare il casco reattivo

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 accetta semplici tag HTML e genera semplici tag HTML. È semplicissimo e React amichevole per i principianti.

per più script, utilizzare questo

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);
}

Puoi trovare la migliore risposta al seguente link:

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();
};

Secondo la soluzione di Alex McMillan , ho il seguente adattamento.
Il mio ambiente: React 16.8+, next v9 +

// aggiungi un componente personalizzato chiamato 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.
}

// Usa il compoennt personalizzato, basta importarlo e sostituire il vecchio <script>tag minuscolo con il tag personalizzato camel case <Script>sarebbe sufficiente.
// 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>

Un po 'in ritardo alla festa, ma ho deciso di crearne uno mio dopo aver esaminato le risposte di @Alex Macmillan e questo è stato passando due parametri extra; la posizione in cui posizionare gli script come o e impostare l'asincrono su vero / falso, eccolo qui:

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;

Il modo di chiamarlo è esattamente lo stesso mostrato nella risposta accettata di questo post ma con due parametri (di nuovo) extra:

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

Per importare file JS nel progetto di reazione utilizzare questo comando

1. Sposta il file JS nel progetto.
2. importare js nella pagina usando il seguente comando

È semplice e facile

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

Nel mio caso, vorrei importare questi file JS nel mio progetto di reazione.

La soluzione dipende dallo scenario. Come nel mio caso, ho dovuto caricare un incorporamento del calendario all'interno di un componente di reazione.

Calendly cerca un div e legge dal suo data-urlattributo e carica un iframe all'interno di detto div.

Va tutto bene quando carichi la pagina per la prima volta: prima, div con data-url viene visualizzato. Quindi lo script del calendario viene aggiunto al corpo. Il browser lo scarica e lo valuta e torniamo tutti a casa felici.

Il problema si presenta quando navighi via e poi ritorni nella pagina. Questa volta lo script è ancora nel corpo e il browser non lo scarica e rivaluta.

fix:

1. Alla componentWillUnmountricerca e rimozione dell'elemento script. Quindi su re mount, ripetere i passaggi precedenti.
2. Enter $.getScript. È un elegante jquery helper che prende un URI di script e un callback di successo. Una volta caricato lo script, lo valuta e genera il callback di successo. Tutto quello che devo fare è nel mio componentDidMount $.getScript(url). Il mio rendermetodo ha già il div mensile. E funziona senza problemi.