Wie kann ich rohes HTML in React sicher rendern?

Roh-HTML mit React rendern: Ein sichererer Ansatz

In React kann das Rendern von Roh-HTML eine komplexe Aufgabe sein. Während die herkömmliche Methode der Verwendung von hazardlySetInnerHTML in früheren Versionen funktionierte, wurde sie aus Sicherheitsgründen inzwischen nicht mehr unterstützt. Es stehen jedoch jetzt sicherere Methoden zur Verfügung.

Sichere Rendering-Optionen

Für ein sichereres HTML-Rendering stehen Ihnen vier Hauptoptionen zur Verfügung:

1. Unicode: Speichern Sie Ihre Datei als UTF-8 und stellen Sie den Zeichensatz auf UTF-8 ein. Verwenden Sie Unicode-Zeichen für Symbole und spezielle Entitäten.
2. Unicode-Nummer:Verwenden Sie innerhalb einer JavaScript-Zeichenfolge die Unicode-Nummer für die gewünschte Entität.
3. Gemischtes Array: Kombinieren Sie Strings und JSX-Elemente innerhalb eines Arrays zum Rendern.
4. dangerouslySetInnerHTML: Als letzten Ausweg können Sie „DangerouslySetInnerHTML“ verwenden, indem Sie die Eingabe ändern, die Sie benötigen.

Beispiel für die Verwendung der Mixed-Array-Option:

const markup = [
  'First ',
  <span>&amp;middot;</span>,
  ' Second'
];

return <div>{markup}</div>;

Fazit

Beim Rendern von Roh-HTML mit React kann es sein In bestimmten Szenarien ist es notwendig, der Sicherheit Vorrang einzuräumen. Durch die Verwendung der oben beschriebenen sichereren Methoden können Sie die Sicherheit und Zuverlässigkeit Ihrer React-Anwendungen gewährleisten und gleichzeitig Ihre Rendering-Anforderungen erfüllen.

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