Maison  >  Article  >  interface Web  >  Comment restituer du HTML brut dans React en toute sécurité sans « dangereusementSetInnerHTML » ?

Comment restituer du HTML brut dans React en toute sécurité sans « dangereusementSetInnerHTML » ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-26 18:27:30252parcourir

How to Render Raw HTML in React Safely Without `dangerouslySetInnerHTML`?

Rendre le HTML brut dans React à l'aide de méthodes plus sûres

Dans React, vous pouvez désormais restituer le HTML brut à l'aide de méthodes plus sûres, en évitant l'utilisation de dangereusementSetInnerHTML . Voici quatre options :

1. Encodage Unicode

Utilisez des caractères Unicode pour représenter des entités HTML dans un fichier codé en UTF-8 :

<div>{`First \u00b7 Second`}</div>

2. Numéros Unicode dans les chaînes JSX

Convertir les entités HTML en nombres Unicode dans les chaînes JSX :

<div>{`First ` + String.fromCharCode(183) + ` Second`}</div>

3. Tableau mixte de chaînes et d'éléments JSX

Combinez des chaînes et des éléments JSX pour restituer du HTML complexe :

<div>{[`First `, <span>&middot;</span>, ` Second`]}</div>

4. DangerouslySetInnerHTML en dernier recours

N'utilisez dangereusementSetInnerHTML qu'en dernier recours, car il introduit des vulnérabilités de sécurité potentielles :

<div dangerouslySetInnerHTML={{__html: `First &middot; Second`}} />

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn