Comment ajouter en toute sécurité des balises de script aux composants React ?

Ajout d'une balise de script à React/JSX

Dans React, vous pouvez ajouter des scripts en ligne en utilisant dangereusementSetInnerHTML ou en créant un élément de script dans le cycle de vie du composantDidMount

Utilisation dangereusementSetInnerHTML

vous permet de spécifier du HTML brut sous forme de chaîne, mais il est important de noter qu'il doit être utilisé avec prudence car il ouvre des failles de sécurité. Par exemple :

<script src="https://use.typekit.net/foobar.js"></script>
<script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>

Cependant, cette approche peut ne pas toujours exécuter le script souhaité.

Création d'un élément de script dans composantDidMount

Considérez ce qui suit :

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

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

    document.body.appendChild(script);
}

Cette méthode insère dynamiquement le script dans le DOM lorsque le composant est monté.

Approche recommandée : utilisation des packages npm

Avant d'utiliser les scripts en ligne, il est recommandé de vérifier si un package npm prédéfini est disponible pour le script que vous souhaitez charger. Par exemple, si vous souhaitez charger Typekit, vous pouvez installer le package typekit et l'importer comme ceci :

import Typekit from 'typekit';

Mise à jour : utilisation de useEffect Hook

Avec l'introduction des hooks, vous pouvez utiliser useEffect pour charger davantage de scripts efficacement :

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

Vous pouvez également intégrer cette logique dans un hook personnalisé pour une réutilisation facile.

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!