Wie lade ich eine lokale HTML Datei in React und zeige diese an?

In diesem Beitrag zeige ich euch das Laden einer HTML Datei in React und wie ihr diese anzeigen könnt. Ihr solltet dies nur tun, wenn ihr der anzuzeigenden Datei vertraut, denn diese kann Schadcode in eure Seite injizieren.

Der Code innerhalb von useEffect wird beim Aufrufen und Neuladen der Komponente Example einmalig ausgeführt. Das Laden per fetch erfolgt asynchron. Fetch gibt ein Promise zurück. Ist das Laden der Datei abgeschlossen wird der Code innerhalb von then ausgeführt.

Zum Speichern des Inhaltes nutzen wir einen State und setzen diesen mit setContent auf den Inhalt der Datei. Die Variable content reflektiert die Änderung des Inhaltes und zeigt diesen an.

import { useState } from "react";
import { useEffect } from "react";
export const Example = (props) => {
  const [content, setContent] = useState("");

  useEffect(() => {
    fetch("./myFile.html").then((response) => {
      setContent(response.data);
    });
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: content }} />;
};

Beitrage der gleichen Kategorie

Deploy React to Raspberry Pi

In diesem Artikel möchte ich euch in aller Kürze ein kleines Script an die Hand geben, welches es euch ermöglicht per npm Kommando eure Applikation auf den Raspberry Pi oder ein sonstiges Linux System zu deployen. Für die Datenkopie nutzen wir den Befehl scp. Die komplette Syntax und Referenz findet ihr hier. Damit das Script […]

0 Kommentare

Bitte tragt euren Namen ein.
Bitte tragt eure Email-Adresse ein.
Top