HTML s'échappant dans React

Sortir du contenu fixe en JSX directement en utilisant les caractères UTF-8 {code...} Utiliser les caractères d'échappement HTML {code...} ou les caractères d'échappement décimaux {code...} Échapper du contenu dynamique , mais si vous ajoutez une couche d'accolades à l'extérieur, afin d'empêcher XSS d'échapper à nouveau aux entités de caractères échappées, dans cet article, nous partagerons avec vous la méthode d'échappement HTML dans React.

1. Utilisez directement les caractères UTF-8

   <p>版权 ©</p>

   Copier après la connexion

   Copier après la connexion

2. Utilisez les caractères d'échappement HTML

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

   Copier après la connexion

   Copier après la connexion

   ou caractère d'échappement décimal

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

   Copier après la connexion

   Copier après la connexion

Échappement du contenu dynamique

Mais si vous ajoutez une couche d'accolades à l'extérieur, réagir empêchera xss Les entités de caractères échappées être à nouveau échappé

React échappera à toutes les chaînes à afficher dans le DOM pour empêcher XSS. Par conséquent, si JSX contient des caractères d'entité échappés, tels que © (©), il ne s'affichera pas correctement dans le DOM final car React échappe automatiquement les caractères spéciaux dans ©.

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

Sortie d'erreur

版权 ©

Écriture correcte :

1. L'utilisation directe des caractères UTF-8 peut toujours générer une sortie correcte

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

   Copier après la connexion

   Copier après la connexion

2. Une approche sûre consiste à utiliser le code Unicode correspondant

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

   Copier après la connexion

   Copier après la connexion

3. Utiliser fromCharCode

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

   Copier après la connexion

   Copier après la connexion

4. Utilisez l'assemblage de tableaux

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

   Copier après la connexion

   Copier après la connexion

5. Utilisez dangereusementSetInnerHTML pour éviter les caractères d'échappement React

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

   Copier après la connexion

   Copier après la connexion

Référence

1. JSX Gotchas

2. Au plus profond de la pile technologique de réaction

dans JSX Output contenu fixe dans

1. utilise directement les caractères UTF-8

   <p>版权 ©</p>

   Copier après la connexion

   Copier après la connexion

2. utilise des caractères d'échappement HTML

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

   Copier après la connexion

   Copier après la connexion

   Ou des caractères d'échappement décimaux

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

   Copier après la connexion

   Copier après la connexion

Échappement du contenu dynamique

Mais si vous ajoutez une grosse couche à l'extérieur Dans le cas de parenthèses, React échappera à nouveau aux entités de caractères échappées afin d'empêcher XSS

React échappera à toutes les chaînes à afficher dans le DOM pour empêcher XSS. Par conséquent, si JSX contient des caractères d'entité échappés, tels que © (©), il ne s'affichera pas correctement dans le DOM final car React échappe automatiquement les caractères spéciaux dans ©.

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

Sortie d'erreur

版权 ©

Écriture correcte :

1. L'utilisation directe des caractères UTF-8 peut toujours générer une sortie correcte

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

   Copier après la connexion

   Copier après la connexion

2. Une approche sûre consiste à utiliser le code Unicode correspondant

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

   Copier après la connexion

   Copier après la connexion

3. Utiliser fromCharCode

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

   Copier après la connexion

   Copier après la connexion

4. Utilisez l'assemblage de tableaux

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

   Copier après la connexion

   Copier après la connexion

5. Utilisez dangereusementSetInnerHTML pour éviter les caractères d'échappement de React

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

   Copier après la connexion

   Copier après la connexion

Ce qui précède est React The Méthode d'échappement HTML dans , j'espère que cela pourra aider tout le monde.

Recommandations associées :

Comment écrire des composants dans React

La différence entre setState dans React et Preact

Connaissance du système d'événements React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!