J'ai un problème relativement simple d'essayer d'ajouter des scripts en ligne à un composant React. Ce que j'ai jusqu'à présent:

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

J'ai aussi essayé:

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

Aucune des deux approches ne semble exécuter le script souhaité. Je suppose que c'est une chose simple qui me manque. Quelqu'un peut-il m'aider?

PS: Ignorez le foobar, j'ai un vrai identifiant réellement utilisé que je n'ai pas envie de partager.

Edit: Les choses changent rapidement et ce n'est plus à jour - voir la mise à jour

Voulez-vous récupérer et exécuter le script encore et encore, à chaque fois que ce composant est rendu, ou une seule fois lorsque ce composant est monté dans le DOM?

Essayez peut-être quelque chose comme ceci:

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

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

    document.body.appendChild(script);
}

Cependant, cela n'est vraiment utile que si le script que vous souhaitez charger n'est pas disponible en tant que module / package. Premièrement, je voudrais toujours:

• Recherchez le package sur npm
• Téléchargez et installez le package dans mon projet (npm install typekit )
• importle package où j'en ai besoin ( import Typekit from 'typekit';)

C'est probablement la façon dont vous avez installé les packages reactet à react-document-titlepartir de votre exemple, et un package Typekit est disponible sur npm .

Mettre à jour:

Maintenant que nous avons des crochets, une meilleure approche pourrait être d'utiliser useEffectcomme ceci:

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

Ce qui en fait un excellent candidat pour un crochet personnalisé (par exemple:) 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;

Qui peut être utilisé comme ceci:

import useScript from 'hooks/useScript';

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

  // rest of your component
}

En plus des réponses ci-dessus, vous pouvez faire ceci:

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

Le div est lié à this et le script y est injecté.

La démo peut être trouvée sur codesandbox.io

Ma façon préférée est d'utiliser React Helmet - c'est un composant qui permet une manipulation facile de la tête du document d'une manière que vous avez probablement déjà utilisée.

par exemple

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 vous devez avoir un <script>bloc en SSR (rendu côté serveur), une approche avec componentDidMountne fonctionnera pas.

Vous pouvez utiliser la react-safebibliothèque à la place. Le code dans React sera:

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 réponse d' Alex Mcmillan m'a le plus aidé mais n'a pas vraiment fonctionné pour une balise de script plus complexe.

J'ai légèrement modifié sa réponse pour trouver une solution pour une longue balise avec diverses fonctions qui définissait en outre déjà "src".

(Pour mon cas d'utilisation, le script devait vivre dans la tête, ce qui se reflète également ici):

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

J'ai créé un composant React pour ce cas spécifique: https://github.com/coreyleelarson/react-typekit

Il vous suffit de passer votre ID de kit Typekit comme accessoire et vous êtes prêt à partir.

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;

Il existe une solution de contournement très agréable à utiliser 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));
}

Cela fonctionne pour du HTML arbitraire et conserve également des informations de contexte telles que document.currentScript.

Vous pouvez utiliser npm postscribepour charger le script dans le composant React

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

Vous pouvez également utiliser le casque React

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

Le casque prend des balises HTML simples et génère des balises HTML simples. C'est très simple et React est adapté aux débutants.

pour plusieurs scripts, utilisez ceci

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

Vous pouvez trouver la meilleure réponse sur le lien suivant:

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

Selon la solution d' Alex McMillan , j'ai l'adaptation suivante.
Mon propre environnement: React 16.8+, next v9 +

// ajouter un composant personnalisé nommé 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.
}

// Utilisez le compoennt personnalisé, importez-le simplement et remplacez l'ancienne <script>balise minuscule par la balise camel personnalisée <Script>suffirait.
// 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 peu tard pour la fête mais j'ai décidé d'en créer une après avoir regardé les réponses de @Alex Macmillan et c'était en passant deux paramètres supplémentaires; la position dans laquelle placer les scripts tels que or et la configuration de l'async sur true / false, la voici:

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 façon de l'appeler est exactement la même que celle indiquée dans la réponse acceptée de ce post, mais avec deux (supplémentaires) paramètres supplémentaires:

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

Pour importer des fichiers JS dans le projet React, utilisez cette commange

1. Déplacez le fichier JS vers le projet.
2. importer les js dans la page en utilisant la commande suivante

C'est simple et facile.

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

Dans mon cas, je voudrais importer ces fichiers JS dans mon projet React.

La solution dépend du scénario. Comme dans mon cas, j'ai dû charger une intégration calendaire à l'intérieur d'un composant React.

Calendly recherche un div et lit à partir de son data-urlattribut et charge un iframe à l'intérieur dudit div.

Tout va bien lorsque vous chargez la page pour la première fois: d'abord, div avec data-urlest rendu. Ensuite, un script calendaire est ajouté au corps. Le navigateur le télécharge et l'évalue et nous rentrons tous chez nous heureux.

Le problème survient lorsque vous vous éloignez puis revenez dans la page. Cette fois, le script est toujours dans le corps et le navigateur ne le télécharge pas et ne le réévalue pas.

Réparer:

1. Sur componentWillUnmountrechercher et supprimer l'élément de script. Ensuite, lors du remontage, répétez les étapes ci-dessus.
2. Entrez $.getScript. Il s'agit d'une aide jquery astucieuse qui prend un URI de script et un rappel de réussite. Une fois le script chargé, il l'évalue et déclenche votre rappel de réussite. Tout ce que j'ai à faire, c'est dans mon componentDidMount $.getScript(url). Ma renderméthode a déjà le div calendaire. Et ça marche bien.