Je voudrais ajouter à mon composant React un

<script>http://xxx.xxx/XX.js</script>

Je sais que je peux simplement l'ajouter en utilisant JSX, ce que je ne sais pas, c'est comment l'utiliser,

Par exemple, ce script a une fonction appelée A.Sort (), comment puis-je l'appeler et l'utiliser à partir d'un composant?

36
metalice 20 nov. 2018 à 18:28

4 réponses

Meilleure réponse

Vous pouvez charger le script de manière asynchrone et y accéder lors du chargement.

componentDidMount() {
  const script = document.createElement("script");
  script.src = "/static/libs/your_script.js";
  script.async = true;
  script.onload = () => this.scriptLoaded();

  document.body.appendChild(script);
}

Il doit être attaché au window.

 scriptLoaded() {
   window.A.sort();
 }

Ou

scriptLoaded() {
  A.sort();
}
21
Flow 20 nov. 2018 à 15:55

Vous pouvez inclure la balise dans /public/index.html, puis utiliser le script tel que vous l'utilisez dans le code JS normal, en suivant l'exemple si vous souhaitez utiliser jQuery:

Dans votre public / index.html comprennent les éléments suivants:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Et puis partout où vous pouvez utiliser la fonctionnalité jQuery comme d'habitude:

window.$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
8
Bilal 20 nov. 2018 à 15:42

Parfois, nous devons travailler avec des bibliothèques js externes dans de tels cas, nous devons insérer des balises de script dans les composants, mais en réaction, nous utilisons jsx, donc nous ne pouvons pas ajouter directement des balises de script comme nous le faisons en HTML.

Dans cet exemple, nous verrons comment charger un fichier de script externe dans une tête, des éléments de corps ou un composant.

componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://some-scripturl.js";
    script.onload = () => this.scriptLoaded();



    //For head
    document.head.appendChild(script);

    // For body
    document.body.appendChild(script);

    // For component
    this.div.appendChild(script);

  }
-1
Hany Moh. 8 nov. 2019 à 07:38

Vous pouvez soit modifier votre fichier index.html (si vous en utilisez un) en ajoutant le script requis.

Alternativement, si vous ne pouvez pas le modifier ou que vous ne l'utilisez pas, il y a un tas d'add-ons qui résolvent cela, par exemple react-load-script

0
keul 20 nov. 2018 à 15:45