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>

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

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

   ou caractère d'échappement décimal

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

É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>

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

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

3. Utiliser fromCharCode

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

4. Utilisez l'assemblage de tableaux

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

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

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

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>

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

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

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

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

É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>

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

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

3. Utiliser fromCharCode

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

4. Utilisez l'assemblage de tableaux

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

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

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

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!