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

Hinzufügen eines Skript-Tags zu React/JSX

In React/JSX gibt es mehrere Ansätze zur Integration von Inline-Skripten. Eine mögliche Lösung besteht darin, eine Funktion innerhalb der Komponente zu erstellen, die das Skript in das DOM einbindet. Zum Beispiel:

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

Diese Methode ist jedoch nicht ideal, wenn das Skript bereits im DOM vorhanden ist oder mehrmals geladen werden muss.

Ein effektiverer Ansatz besteht darin, ein Paket zu nutzen Manager wie npm, um das Skript als Modul zu installieren. Dies vereinfacht den Integrationsprozess und macht das Skript für den Import zugänglich:

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

Diese Technik stellt sicher, dass das Skript nur einmal geladen wird, wenn die Komponente bereitgestellt wird, und entfernt wird, wenn die Komponente nicht bereitgestellt wird.

Um diesen Ansatz weiter zu verbessern, kann ein benutzerdefinierter Hook erstellt werden, der den Skriptladevorgang abwickelt:

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;

Dieser benutzerdefinierte Hook kann dann in jeder Komponente verwendet werden, die das erfordert Skript:

import useScript from 'hooks/useScript';

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

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