Maison >interface Web >js tutoriel >Comment ajouter dynamiquement des balises de script dans React ?

Comment ajouter dynamiquement des balises de script dans React ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-14 07:55:10233parcourir

How to Dynamically Add Script Tags in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn