Comment ajouter des balises de script aux composants React ?-js tutoriel-php.cn

Comment ajouter des balises de script aux composants React ?

Linda Hamilton

Libérer： 2024-12-09 09:14:06

original

973 Les gens l'ont consulté

How to Add Script Tags to React Components?

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

Copier après la connexion

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
    }
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!