Wie rendere ich rohes HTML in React sicher ohne „dangerouslySetInnerHTML“?

Roh-HTML in React mit sichereren Methoden rendern

In React können Sie jetzt Roh-HTML mit sichereren Methoden rendern und so die Verwendung von hazardlySetInnerHTML vermeiden . Hier sind vier Optionen:

1. Unicode-Kodierung

Verwenden Sie Unicode-Zeichen, um HTML-Entitäten in einer UTF-8-kodierten Datei darzustellen:

<div>{`First \u00b7 Second`}</div>

2. Unicode-Zahlen in JSX-Strings

HTML-Entitäten in Unicode-Zahlen innerhalb von JSX-Strings konvertieren:

<div>{`First ` + String.fromCharCode(183) + ` Second`}</div>

3. Gemischtes Array aus Strings und JSX-Elementen

Kombinieren Sie Strings und JSX-Elemente, um komplexes HTML zu rendern:

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

4. DangerouslySetInnerHTML als letzten Ausweg

Verwenden Sie „dangerouslySetInnerHTML“ nur als letzten Ausweg, da es potenzielle Sicherheitslücken mit sich bringt:

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

Das obige ist der detaillierte Inhalt vonWie rendere ich rohes HTML in React sicher ohne „dangerouslySetInnerHTML“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!