Wie kann ich HTML-Strings in ReactJS sicher als JSX rendern?

HTML-Strings in ReactJS JSX konvertieren

In ReactJS kann die Anzeige von aus AJAX-Anfragen abgerufenen HTML-Daten eine Herausforderung darstellen, da die Daten normalerweise gerendert werden als Text. Um dieses Problem zu lösen und HTML-Inhalte anzuzeigen, bietet ReactJS eine Lösung.

Lösung: terriblelySetInnerHTML

ReactJS enthält eine spezielle Eigenschaft namens hazardlySetInnerHTML, mit der Sie HTML unverändert rendern können . Diese Eigenschaft wird jedoch mit Vorsicht verwendet, da sie den integrierten XSS-Schutz (Cross-Site-Scripting) von React umgeht.

Um hazardlySetInnerHTML zu verwenden, übergeben Sie einfach die HTML-Daten als Wert:

<td dangerouslysetinnerhtml="{{__html:" this.state.actions></td>

Anpassung

Wenn Sie den gerenderten HTML-Code in irgendeiner Weise ändern möchten, können Sie dies tun Verwenden Sie eine Komponente wie „react-html-parser“ oder „react-dom-parser“. Mit diesen Komponenten können Sie HTML-Daten analysieren und ändern, bevor Sie sie in Ihrer ReactJS-App anzeigen.

Sicherheitsüberlegungen

Es ist wichtig zu beachten, dass hazardlySetInnerHTML nur verwendet werden sollte, wenn dies unbedingt erforderlich ist notwendig. Bei unsachgemäßer Verwendung können XSS-Schwachstellen entstehen. Stellen Sie zum Schutz vor bösartigem Code sicher, dass die HTML-Daten vor dem Rendern bereinigt und validiert werden.

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