Comment puis-je insérer dynamiquement du contenu HTML dans mon composant React ?

Exploiter dangereusementSetInnerHTML de React pour insérer dynamiquement du contenu HTML

Dans le domaine du développement de React, les développeurs sont souvent confrontés à la nécessité d'insérer du contenu HTML qui dynamiquement changements en fonction de l’état de l’application. C'est là que le concept d'utilisation des instructions de variable React dans JSX entre en jeu.

Considérez le scénario dans lequel vous avez une variable, telle que la suivante, contenant du HTML :

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

Votre objectif consiste à insérer ce HTML dans votre composant React en utilisant JSX. Cependant, tenter de le faire en utilisant la méthode standard présentée ci-dessous ne fonctionnera pas :

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

En effet, React traite le contenu HTML comme une chaîne et échappe ses caractères HTML. Pour activer l'insertion dynamique de HTML avec des variables React, vous devez utiliser une propriété React spéciale appelée dangereusementSetInnerHTML. Cette propriété vous permet de contourner le comportement par défaut de React consistant à échapper des caractères HTML et d'insérer le contenu HTML brut dans le DOM.

Pour implémenter cela, modifiez votre code comme suit :

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

En utilisant dangereusementSetInnerHTML, vous pouvez insérer dynamiquement du contenu HTML complexe dans votre composant React en fonction de variables, permettant une plus grande flexibilité et une plus grande puissance d'expression dans vos applications.

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!