React: HTML aus String ausgeben

HTML aus einer Variable ausgeben mit React.

In einer React-Anwendung wollte ich einen String ausgeben, mit HTML-Code. Allerdings gibt React den String standardmäßig als reinen Text aus und interpretiert den HTML-Code nicht. Dies dürfte auch aus Sicherheitsgründen so sein, damit nicht einfach irgendwas ausgeführt wird, was ein Anwender z.B. in ein Eingabefeld hackt.

HTML-Code in React ausgeben

Aber es gibt es Lösung. Hierzu installieren wir das Modul „html-react-parser“.

npm install html-react-parser

Anschließend importieren wir dieses in unseren Quelltext.

import HTMLReactParser from 'html-react-parser';

Nun können wir den String durch den Parser schicken und erhalten als Ergebnis die Ausgabe im HTML-Format.

<p>{HTMLReactParser(settings.introText)}</p>

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht.