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

Hinzufügen eines Skript-Tags zu React/JSX

In React können Sie Inline-Skripte hinzufügen, indem Sie entweder hazardlySetInnerHTML verwenden oder ein Skriptelement erstellen der ComponentDidMount-Lebenszyklus Methode.

DangerouslySetInnerHTML verwenden

ermöglicht Ihnen die Angabe von Roh-HTML als Zeichenfolge. Beachten Sie jedoch, dass die Verwendung mit Vorsicht erfolgen sollte, da dadurch Sicherheitslücken entstehen. Zum Beispiel:

<script src="https://use.typekit.net/foobar.js"></script>
<script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>

Dieser Ansatz führt jedoch möglicherweise nicht immer das gewünschte Skript aus.

Erstellen eines Skriptelements in ComponentDidMount

Bedenken Sie Folgendes:

componentDidMount () {
    const script = document.createElement("script");

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

    document.body.appendChild(script);
}

Diese Methode fügt das Skript dynamisch in das ein DOM, wenn die Komponente gemountet wird.

Empfohlener Ansatz: Verwendung von npm-Paketen

Bevor Sie Inline-Skripting verwenden, wird empfohlen, zu überprüfen, ob ein vorgefertigtes npm-Paket verfügbar ist für das Skript, das Sie laden möchten. Wenn Sie beispielsweise Typekit laden möchten, können Sie das Typekit-Paket installieren und wie folgt importieren:

import Typekit from 'typekit';

Update: Verwendung von useEffect Hook

Mit der Einführung von Hooks können Sie useEffect verwenden, um Skripte effizienter zu laden:

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

Das ist möglich Packen Sie diese Logik auch in einen benutzerdefinierten Hook ein, um die Wiederverwendbarkeit zu erleichtern.

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