HTML-Escape in React

Geben Sie feste Inhalte in JSX direkt mit UTF-8-Zeichen {Code...} aus. Verwenden Sie HTML-Escape-Zeichen {Code...} oder Dezimal-Escape-Zeichen {Code...}. Escape von dynamischen Inhalten , aber wenn Sie außen eine Ebene aus geschweiften Klammern hinzufügen, um zu verhindern, dass XSS die maskierten Zeichenentitäten erneut maskiert, stellen wir Ihnen in diesem Artikel die HTML-Escape-Methode in React vor.

1. UTF-8-Zeichen direkt verwenden

   <p>版权 ©</p>

2. HTML-Escape-Zeichen verwenden

   <p>版权 &copy;</p>

   oder dezimales Escape-Zeichen

   <p>版权 &#169;</p>

Escape von dynamischem Inhalt

Wenn Sie jedoch außen eine Ebene mit geschweiften Klammern hinzufügen, verhindert React xss. Die Escape-Zeichen-Entitäten werden dies verhindern erneut maskiert werden

React maskiert alle im DOM anzuzeigenden Zeichenfolgen, um XSS zu verhindern. Wenn JSX daher maskierte Entitätszeichen wie © (©) enthält, wird es im endgültigen DOM nicht korrekt angezeigt, da React die Sonderzeichen in © automatisch maskiert.

<p>{'版权 &#169;'}</p>

Fehlerausgabe

版权 ©

Korrektes Schreiben:

1. Die direkte Verwendung von UTF-8-Zeichen kann immer noch korrekt ausgegeben werden

   <p>{'版权 ©'}</p>

2. Ein sicherer Ansatz ist die Verwendung des entsprechenden Unicode-Codes

   <p>{'版权 \u00a9'}</p>

3. Verwenden Sie fromCharCode

   <p>{'版权 ' + String.fromCharCode(169)}</p>

4. Array-Assembly verwenden

   <p>{['版权 ', <span>&#169;</span>]}</p>

5. Verwenden Sie hazardlySetInnerHTML, um React-Escape-Zeichen zu vermeiden

   <p dangerouslySetInnerHTML={{ __html: &#39;版权 &#169;&#39; }} />

Referenz

1. JSX-Fallstricke

2. Tief in den React-Technologie-Stack

in JSX Geben Sie feste Inhalte in

1. aus. Verwenden Sie direkt UTF-8-Zeichen.

   <p>版权 ©</p>

2. Verwenden Sie HTML-Escape-Zeichen.

   <p>版权 &copy;</p>

   Oder dezimale Escape-Zeichen

   <p>版权 &#169;</p>

Escape von dynamischen Inhalten

Aber wenn Sie außerhalb des Gehäuses eine große Ebene hinzufügen In Klammern maskiert React die maskierten Zeichenentitäten erneut, um XSS zu verhindern.

React maskiert alle im DOM anzuzeigenden Zeichenfolgen, um XSS zu verhindern. Wenn JSX daher maskierte Entitätszeichen wie © (©) enthält, wird es im endgültigen DOM nicht korrekt angezeigt, da React die Sonderzeichen in © automatisch maskiert.

<p>{'版权 &#169;'}</p>

Fehlerausgabe

版权 ©

Korrektes Schreiben:

1. Die direkte Verwendung von UTF-8-Zeichen kann immer noch korrekt ausgegeben werden

   <p>{'版权 ©'}</p>

2. Ein sicherer Ansatz ist die Verwendung des entsprechenden Unicode-Codes

   <p>{'版权 \u00a9'}</p>

3. Verwenden Sie fromCharCode

   <p>{'版权 ' + String.fromCharCode(169)}</p>

4. Array-Assembly verwenden

   <p>{['版权 ', <span>&#169;</span>]}</p>

5. Verwenden Sie hazardlySetInnerHTML, um React-Escape-Zeichen zu vermeiden

   <p dangerouslySetInnerHTML={{ __html: &#39;版权 &#169;&#39; }} />

Das Obige ist React The Ich hoffe, dass sie jedem helfen kann, wenn ich die Methode zum Schreiben von HTML-Escape-Schreiben verwende.

Verwandte Empfehlungen:

So schreiben Sie Komponenten in React

Der Unterschied zwischen setState in React und Preact

Wissen über das Ereignissystem reagieren

Das obige ist der detaillierte Inhalt vonHTML-Escape in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!