Comment ajouter des balises de script aux composants React ?

Ajout d'une balise de script à React/JSX

Dans React, l'ajout de scripts en ligne à un composant peut être une tâche simple. Pour y parvenir, envisagez les options suivantes :

Rendu conditionnel avec injection de code dynamique :

import { Component } from 'react';

export default class extends Component {
    render() {
        if (process.env.NODE_ENV === 'production') {
            return (
                <script src="https://use.typekit.net/foobar.js" />
            );
        }

        return null;
    }
}

Création dynamique d'éléments DOM :

class Component extends React.Component {
    componentDidMount() {
        const script = document.createElement('script');

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

        document.body.appendChild(script);
    }

    render() {
        // ... Your component logic
    }
}

Utilisation de Hooks (useEffect avec Nettoyage) :

import { useEffect, useRef } from 'react';

const useScript = (url) => {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) {
        const script = document.createElement('script');

        script.src = url;
        script.async = true;

        ref.current = script;
        document.body.appendChild(script);

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

Utilisation de Hooks (useEffect sans nettoyage) :

import { useEffect } from 'react';

const useScript = (url) => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);
  }, [url]);
};

Remarque : Il est généralement recommandé de utilisez la première approche si vous souhaitez récupérer et exécuter dynamiquement des scripts pendant le rendu, tandis que les autres approches conviennent au chargement des scripts une fois lors du montage du composant dans le DOM.

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!