Comment rendre les chaînes HTML au format HTML dans React ?

Rendu de chaînes HTML au format HTML avec React

Dans React, vous rencontrez souvent des situations où vous devez restituer des chaînes HTML sous forme de contenu HTML réel. Bien que certaines tentatives puissent entraîner l'affichage de la chaîne sous forme de chaîne plutôt que de HTML, vous pouvez adopter plusieurs approches pour obtenir le résultat souhaité.

Une méthode consiste à utiliser la propriété dangereusementSetInnerHTML lors de la création d'un élément HTML. Cette propriété vous permet d'insérer du HTML brut dans le composant. Par exemple, si vous disposez d'une chaîne HTML contenant un

élément, vous pouvez utiliser la syntaxe suivante :

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

Cela devrait restituer l'élément

élément correctement dans le DOM. Cependant, il est important de noter que la chaîne que vous transmettez à dangereusementSetInnerHTML doit toujours être nettoyée pour des raisons de sécurité.

Dans votre cas spécifique, où this.props.match.description n'est pas rendu au format HTML, vous pouvez essayer le suivant :

1. Vérifiez le type : Assurez-vous que this.props.match.description est une chaîne plutôt qu'un objet. S'il s'agit d'un objet, il devra probablement être converti en chaîne.
2. Vérifiez le balisage approprié : Si la chaîne est effectivement une chaîne, inspectez-la pour déceler tout problème de balisage potentiel. Assurez-vous que toutes les balises sont correctement fermées et qu'il n'y a aucune entité de caractère susceptible d'interférer avec le rendu.
3. Décoder les entités HTML : Si vous avez affaire à des entités HTML, elles devront peut-être être décodés avant de les transmettre à DangerlySetInnerHTML. Vous pouvez utiliser une fonction comme htmlDecode pour y parvenir.

En mettant en œuvre ces étapes, vous devriez être en mesure de restituer avec succès les chaînes HTML sous forme de HTML réel dans votre application React. Cependant, il est toujours crucial de donner la priorité à la sécurité en nettoyant l'entrée avant d'utiliser la propriété dangereusementSetInnerHTML.

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!