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

Ajout d'une balise de script à React/JSX

L'objectif de cette question est d'explorer les méthodes permettant d'ajouter des scripts en ligne aux composants React. L'utilisateur a tenté de charger un script externe en utilisant à la fois les balises de script en ligne et la propriété dangereusementSetInnerHTML, mais aucune des deux approches ne semble exécuter le script souhaité.

Une solution suggérée consiste à créer une méthode componentDidMount dans le composant React et à créer dynamiquement créer et ajouter un élément de script au DOM. Cette approche garantit que le script n'est exécuté qu'une seule fois lorsque le composant est monté.

Cependant, une approche plus moderne et recommandée dans React consiste à utiliser le hook useEffect. Ce hook vous permet d'effectuer des effets secondaires, tels que des appels d'API ou la manipulation du DOM, après le rendu du composant.

L'extrait de code suivant montre comment utiliser useEffect pour charger un script :

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

En enveloppant ce code dans un hook personnalisé, il devient réutilisable dans plusieurs composants :

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};

Qui peut être utilisé comme suit :

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // Rest of the component
}

L'utilisation du hook useEffect avec un hook de script personnalisé fournit un moyen propre et efficace de charger et d'exécuter des scripts dans les composants React.

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!