web-dev-qa-db-fra.com

Comment charger le script dans le composant React

Je rencontre le fichier de script suivant

<script language="javascript">

document.write('<script language="javascript" src="http://tickettransaction.com/?bid='+bid+'&sitenumber='+site+'&tid=event_dropdown" ></' + 'script>');
</script>

Je suis ceci Ajout d'une balise de script à React/JSX mais cela ne fonctionne pas pour moi ...

Comment charger le script dans mon composant React?

javascriptreactjsjsx
4
Ashh

Après beaucoup de R&D, j'ai finalement trouvé ma solution.

J'ai utilisé (npm postscribe pour charger le script dans le composant React

postscribe('#mydiv', '<script language="javascript" src="http://tickettransaction.com/?bid='+bid+'&sitenumber='+site+'&tid=event_dropdown"></script>')
8
Ashh

la méthode suivante est travaillée pour moi. essayez, j'espère que cela fonctionnera pour vous. en gros, vous pouvez créer une balise de script et l'ajouter à la balise body. comme ça--

var tag = document.createElement('script');
tag.async = true;
tag.src = 'THE PATH TO THE JS FILE OR A CDN LINK';
var body = document.getElementsByTagName('body')[0];
body.appendChild(tag);

vous pouvez l'utiliser sur un crochet du cycle de vie de réagir comme ça.

componentDidMount() {
    var loadScript = function (src) {
      var tag = document.createElement('script');
      tag.async = false;
      tag.src = src;
      var body = document.getElementsByTagName('body')[0];
      body.appendChild(tag);
    }

    loadScript('PATH TO THE JS FILE OR CDN URL');
  }
2
Sushil

Vous pouvez suivre ma réponse ici: ajouter une bibliothèque js tierce à Create React App

0
Yash Thakur

Je recommande d'utiliser React Helmet . Je l'ai utilisé sur quelques applications Create-React, et il vous permet d'écrire de véritables balises de script combinées avec Vanilla JS.

Cela rend le processus beaucoup plus fluide. Donc, pour vous, ce serait quelque chose comme ça une fois que vous aurez importé React Helmet.

<script language="javascript" src='http://tickettransaction.com/?bid='+ bid + '&sitenumber='+ site +'&tid=event_dropdown' ></ script>
0
Alex Hughes