Der Titel könnte lauten: Jenseits gefährlicher SetInnerHTML: Gibt es sicherere Möglichkeiten, Roh-HTML in React zu rendern?

Roh-HTML in React mit erhöhter Sicherheit rendern

Frage:

Verwendet hazardlySetInnerHTML the einzige Methode zum Rendern von Roh-HTML in React?

Antwort:

Seit den ersten in der Frage beschriebenen Methoden gab es Fortschritte in React, um eine sicherere HTML-Wiedergabe zu gewährleisten. Hier sind heute vier Optionen verfügbar:

1. Unicode

Kodieren Sie die HTML-Zeichen mit Unicode. Speichern Sie die Datei als UTF-8 und stellen Sie den Zeichensatz auf UTF-8 ein. Beispiel:

<div>{'\u00b7'}</div>

2. Unicode-Nummer

Einbetten der Unicode-Nummer in eine JavaScript-Zeichenfolge.

<div>{String.fromCharCode(183)}</div>

3. Gemischtes Array

Kombinieren Sie Strings und JSX-Elemente zu einem Array:

<div>{['First ', <span>&amp;middot;</span>, ' Second']}</div>

4. DangerouslySetInnerHTML (letzter Ausweg)

DangerouslySetInnerHTML als letzte Option verwenden:

<div dangerouslySetInnerHTML={{__html: 'First &amp;middot; Second'}} />

Empfehlungen:

Die ersten drei Methoden werden bevorzugt für Sicherheit und Wartbarkeit. Verwenden Sie hazardlySetInnerHTML nur, wenn es unbedingt erforderlich ist.

Das obige ist der detaillierte Inhalt vonDer Titel könnte lauten: Jenseits gefährlicher SetInnerHTML: Gibt es sicherere Möglichkeiten, Roh-HTML in React zu rendern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!