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

Hinzufügen eines Skript-Tags zu React/JSX

Ziel dieser Frage ist es, Methoden zum Hinzufügen von Inline-Skripten zu React-Komponenten zu untersuchen. Der Benutzer hat versucht, ein externes Skript zu laden, indem er sowohl Inline-Skript-Tags als auch die Eigenschaft „dangerouslySetInnerHTML“ verwendet, aber keiner der beiden Ansätze scheint das gewünschte Skript auszuführen.

Eine vorgeschlagene Lösung besteht darin, eine „componentDidMount“-Methode in der React-Komponente dynamisch zu erstellen Erstellen Sie ein Skriptelement und hängen Sie es an das DOM an. Dieser Ansatz stellt sicher, dass das Skript nur einmal ausgeführt wird, wenn die Komponente gemountet wird.

Ein modernerer und empfehlenswerterer Ansatz in React ist jedoch die Verwendung des useEffect-Hooks. Mit diesem Hook können Sie Nebeneffekte wie API-Aufrufe oder die Bearbeitung des DOM ausführen, nachdem die Komponente gerendert wurde.

Der folgende Codeausschnitt zeigt, wie Sie useEffect zum Laden eines Skripts verwenden:

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

Durch das Einschließen dieses Codes in einen benutzerdefinierten Hook wird er in mehreren Komponenten wiederverwendbar:

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

Die als verwendet werden können folgt:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // Rest of the component
}

Die Verwendung des useEffect-Hooks mit einem benutzerdefinierten Skript-Hook bietet eine saubere und effiziente Möglichkeit, Skripte in React-Komponenten zu laden und auszuführen.

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