Wie füge ich Skript-Tags zu React-Komponenten hinzu?

Hinzufügen eines Skript-Tags zu React/JSX

In React kann das Hinzufügen von Inline-Skripten zu einer Komponente eine unkomplizierte Aufgabe sein. Um dies zu erreichen, ziehen Sie die folgenden Optionen in Betracht:

Bedingtes Rendering mit dynamischer Code-Injection:

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

Dynamisches Erstellen von DOM-Elementen:

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

Hooks verwenden (useEffect with Bereinigung):

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

Hooks verwenden (Effect ohne Bereinigung verwenden):

import { useEffect } from 'react';

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

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

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

Hinweis: Es wird allgemein empfohlen Verwenden Sie den ersten Ansatz, wenn Sie Skripte während des Renderns dynamisch abrufen und ausführen möchten, während die anderen Ansätze zum einmaligen Laden von Skripten beim Mounten der Komponente geeignet sind das DOM.

Das obige ist der detaillierte Inhalt vonWie füge ich Skript-Tags zu React-Komponenten hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!