L'ajout de balise de script pour Réagir/JSX

J'ai un relativement simple question d'essayer d'ajouter en ligne de script à Réagir composant. Ce que j'ai à ce jour:

'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 approche semble exécuter le script souhaité. Je devine que c'est une chose simple, je suis absent. Quelqu'un peut-il vous aider?

PS: Ignorer le foobar, j'ai vraiment l'id en cours d'utilisation que je n'ai pas envie de partager.

  • Existe-il une motivation pour le chargement via Réagir au lieu de l'inclure dans votre base de page HTML? Même si cela n'travail, cela signifie que vous sera ré-insertion d'un script à chaque fois que le composant monté.
  • Est-ce le cas? Je suppose DOM de comparaison ce n'est pas le cas, mais j'avoue que cela dépendrait de la mise en œuvre de DocumentTitle.
  • Corriger @loganfsmyth, de Réagir ne sera pas recharger le script sur un nouveau rendu de si le prochain état a également le script.
InformationsquelleAutor ArrayKnight | 2015-12-22
  1. 233

    Voulez-vous de les chercher et d'exécuter le script, encore et encore, chaque fois que cette composante est rendue, ou qu'une fois, lorsque ce composant est monté dans le DOM?

    Peut-être essayer quelque chose comme cela:

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

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

    document.body.appendChild(script);
}

    Toutefois, cela n'est vraiment utile si le script que vous souhaitez charger n'est pas disponible en tant que module/paquet. Tout d'abord, je voudrais toujours:

    • Chercher le paquet sur npm
    • Télécharger et installer le paquet dans mon projet (npm install typekit)
    • import le paquet, où j'en ai besoin (import Typekit from 'typekit';)

    C'est probablement la façon dont vous avez installé les paquets react et react-document-title à partir de votre exemple, et il y a un Typekit package disponible sur ngp.

    • Je vous remercie. Je m'interrogeais sur le mal. Je suis allé de l'avant avec cette mise en œuvre. Tout ajout de la try{Typekit.load({ async: true });}catch(e){} après la appendChild
    • J'ai décidé que les "avancées" de la mise en œuvre de TypeKit est plus adapté à cette approche.
    • Ce n'travail à charger le script, mais comment puis-je obtenir l'accès au code dans le script. Par exemple, j'aimerais appeler une fonction qui vit à l'intérieur d'un script, mais je ne suis pas en mesure de l'invoquer à l'intérieur de l'élément où le script est chargé.
    • Lorsque le script est ajouté à la page, ce sera exécutée comme d'habitude. Par exemple, si vous avez utilisé cette méthode pour télécharger jQuery à partir d'un CDN, puis, après la componentDidMount fonction a téléchargé et ajouté le script de la page, vous aurez la jQuery et $ objets disponibles à l'échelle mondiale (c'est à dire: sur window).
    • C'est dangereux car les manipulations DOM et des demandes de Réseau doit être fait à l'intérieur de componentDidMount ou il peut introduire funky rendre problèmes de. référence: reactjs.org/docs/react-component.html#componentdidmount
    • C'est une remarque importante à être conscient, mais ce n'est pas "dangereux", car il n'utilise pas setState ou de manipuler l'état du composant en aucune façon. Mais c'est certainement pas le "réagir de façon" soit - c'est un hack... et comme tous les hacks, est utile dans certaines situations.
    • J'ai eu un problème similaire, à l'aide d'un script d'authentification et s'est avéré qu'il pourrait être préférable de l'inclure dans le fichier html de la racine d'une couche au-dessus de votre réagir App.js. Dans le cas où quelqu'un trouve cela utile. Comme @loganfsmith mentionné...
    • Comment puis-je charger plusieurs scripts à travers cela?
    • essayez quelque chose comme ceci: jsbin.com/riqujagahe/edit?js
    • Cela fonctionne bien dans ce cas, c'est à dire l'ajout de <body>, mais si l'on a besoin de l'ajouter à un composant créé par Réagir, alors on doit utiliser en ComponentDidMount.
    • c'est Génial.. qui fonctionne pour moi, quand je veux charger le script local, j'ai mis les fichiers js dans le public dossier, js/script.js et puis à la src point à ce que vous appelez normalement scripts de index.html ... script.src = "js/script.js";

    InformationsquelleAutor Alex McMillan
  2. 39

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

    La div est lié à this et le script est injecté dans il.

    De démonstration peut être trouvé sur codesandbox.io

    • c'.l'instance n'a pas fonctionné pour moi, mais le document.corps.appendChild n'a d'Alex McMillan réponse.
    • Vous n'avez probablement pas lier this.instance à la ref l'intérieur de votre méthode de rendu. J'ai ajouté un lien de démonstration pour montrer de travail
    • Cela montre l'erreur: document est pas défini
    • Vous devez faire côté serveur de rendu?
    • oui, je l'ai découvert plus tard que sur le serveur ces objets n'existent pas: document, window. Donc je préfère utiliser le mécanisme national de prévention global paquet
    InformationsquelleAutor sidonaldson
  3. 26

    Ma façon préférée consiste à utiliser Réagir Casque – c'est un composant qui permet une manipulation facile de la section head du document dans une manière que vous êtes probablement déjà utilisé pour.

    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

    • C'est de loin la meilleure solution.
    • Malheureusement, il n'est pas de travail... Voir la codesandbox.io/s/l9qmrwxqzq
    • J'ai reçu votre code de travail en ajoutant async="true" à la <script> balise ajoutée jQuery pour le code.
    • pourquoi il fonctionne avec async=true et échoue sans elle?
    • Casque ressemble à une grande solution à mon problème. Puis-je l'utiliser pour la charge locale .fichiers js? si donc l'esprit de partage, un exemple?
    • le helmet composant dans cet exemple est normal de script éléments comme ses enfants. Donc, tant que la src correctement vos fichiers en local, il va fonctionner. Si vous éprouvez des difficultés à résoudre les scripts dans votre projet, assurez-vous que webpack ou celui de construire des outils que vous utilisez sont le regroupement de ces fichiers quelque part, vous pouvez les utiliser.
    • Essayé ce, ne fonctionne pas pour moi. Je ne recommandent pas l'utilisation de réagir-casque pour la seule raison qu'il injecte des propriétés supplémentaires dans le script ne peut pas être supprimé. De ce fait briser certains scripts, et les responsables n'ont pas fixé dans les prochaines années, et de refuser de github.com/nfl/react-helmet/issues/79

    InformationsquelleAutor Patrice Wrex
  4. 9

    Si vous avez besoin d'avoir <script> bloc en SSR (rendu côté serveur), une approche avec componentDidMount ne fonctionnera pas.

    Vous pouvez utiliser réagissent-safe de la bibliothèque de la place.
    Le code de Réagir 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>
    InformationsquelleAutor scabbiaza
  5. 7

    J'ai créé une Réagir la composante pour ce cas précis: https://github.com/coreyleelarson/react-typekit

    Juste besoin de passer dans votre Typekit Kit ID comme un accessoire et vous êtes bon pour aller.

    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;
    InformationsquelleAutor Corey Larson
  6. 6

    La réponse Alex Mcmillan fourni m'a le plus aidé, mais n'a pas assez de travail pour un script plus complexe de la balise.

    J'ai légèrement modifié sa réponse à venir avec une solution à un tag avec différentes fonctions qui a en outre déjà paramètre "src".

    (Pour mon cas d'utilisation le script nécessaire pour vivre dans la tête qui se traduit ici en tant que bien):

      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);
  }
    • travaillé, merci.
    • Je ne comprends pas pourquoi vous devriez utiliser Réagir à tous, si vous êtes tout simplement le dumping inline JS sur la page... ?
    InformationsquelleAutor jake2620
  7. 3

    Il y a une très belle solution de contournement à l'aide de 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 HTML arbitraire et conserve également les informations de contexte tels que document.currentScript.

    InformationsquelleAutor Maximilian Hils
  8. 2

    Vous pouvez utiliser npm postscribe pour charger le script de réagir composant

    postscribe('#mydiv', '<script src="https://use.typekit.net/foobar.js"></script>')
    • Résout mon problème
    InformationsquelleAutor Fanpark
  9. 0

    J'ai eu document "undefined" lors de l'actualisation. J'ai donc essayé de cette façon

    const MyComponent = () => {
   let script = React.createElement("script", {
    src: "https://.....js path",
    async: true,
    defer: true,
    crossorigin: "anonymous"
})

return (

        <div>
            {script}
        </div>)
}
    InformationsquelleAutor Asanka
  10. 0

    pour plusieurs scripts, utilisez ce

    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')
    InformationsquelleAutor ben
  11. -2

    Solution dépend de scénario. Comme dans mon cas, j'ai eu à charge un calendly intégrer à l'intérieur d'une réagir composant.

    Calendly recherche un div et de lectures à partir c'est data-url attribut et les charges d'une iframe à l'intérieur de ladite div.

    C'est tout bon lors du premier chargement de la page: tout d'abord, div avec data-url est rendu. Puis calendly script est ajouté à corps. Navigateur télécharge et l'évalue et nous avons tous rentrer à la maison heureux.

    Problème vient quand vous la quittez puis revenez dans la page. Cette fois, le script est toujours dans le corps et le navigateur n'a pas re-télécharger & re-évaluer.

    Correctif:

    1. Sur componentWillUnmount trouver et supprimer l'élément script. Ensuite, sur la reconstitution de la montagne, répétez les étapes ci-dessus.
    2. Entrer $.getScript. C'est une chouette jquery helper qui prend un script URI et un succès de rappel. Une fois le script chargé, il les évalue et les feux de votre succès de rappel. Tout ce que j'ai à faire est de mon componentDidMount $.getScript(url). Mon render méthode a déjà le calendly div. Et il fonctionne en douceur.
    • L'ajout de jQuery pour faire cela est une mauvaise idée, en plus de votre cas est très spécifique à vous. En réalité, il n'y a rien de mal avec l'ajout de la Calendly script une fois que je suis sûr que l'API a une re-détecter appel. Le retrait et l'ajout d'un script, encore et encore, n'est pas correct.
    InformationsquelleAutor Rohan Bagchi