Comment ajouter efficacement des balises de script aux composants React/JSX ?

Ajout d'une balise de script à React/JSX

Dans React/JSX, il existe plusieurs approches pour incorporer des scripts en ligne. Une solution potentielle consiste à créer une fonction dans le composant qui monte le script dans le DOM. Par exemple :

componentDidMount() {
  const script = document.createElement("script");
  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;
  document.body.appendChild(script);
}

Cependant, cette méthode n'est pas idéale si le script existe déjà dans le DOM ou doit être chargé plusieurs fois.

Une approche plus efficace consiste à exploiter un package gestionnaire comme npm pour installer le script en tant que module. Cela simplifie le processus d'intégration et rend le script accessible pour l'importation :

import {useEffect} from 'react';

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

Cette technique garantit que le script n'est chargé qu'une seule fois lors du montage du composant et est supprimé lorsque le composant se démonte.

Pour améliorer encore cette approche, un hook personnalisé peut être créé pour gérer le processus de chargement du script :

import { useEffect } from 'react';

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

export default useScript;

Ce hook personnalisé peut ensuite être utilisé dans n'importe quel composant nécessitant le scénario :

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');
  // Rest of the component code
};

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!