Comment ajouter dynamiquement des balises de script dans React ?

Ajout d'une balise de script à React/JSX

Pour le chargement dynamique de scripts, il existe quelques approches à considérer :

Option 1 : Utilisation de la méthode de cycle de vie composantDidMount

Pour les scripts qui ne doivent être exécutés qu'une seule fois lors du montage du composant, vous pouvez utiliser la méthode composantDidMount :

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

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

    document.body.appendChild(script);
}

Option 2 : Utilisation de useEffect Hook

Avec l'avènement des hooks dans React, useEffect offre une solution plus concise et réutilisable :

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

Option 3 : Récupération et exécution du script Dynamiquement

Si le script doit être récupéré et exécuté plusieurs fois, une approche plus dynamique est requise :

fetch('https://use.typekit.net/foobar.js')
  .then(res => res.text())
  .then(scriptText => {
    const script = document.createElement('script');

    script.text = scriptText;

    document.body.appendChild(script);
  });

Envisagez une approche module/package

Cependant, avant de recourir au chargement dynamique de scripts, il est toujours conseillé de vérifier d'abord si le script requis est disponible sous forme de module ou de package via npm. Cette approche offre plusieurs avantages :

• Le code peut être importé proprement
• Les mises à jour des packages peuvent être facilement gérées
• Possibilité d'exploiter les mécanismes de gestion des erreurs intégrés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!