Comment injecter du contenu HTML à l'aide de variables React dans JSX ?

Incorporer du HTML avec des variables React dans JSX

Vous créez une application avec React et avez besoin de pouvoir insérer du contenu HTML à l'aide de variables React dans votre JSX. Voici une solution pour y parvenir :

Utiliser dangereusementSetInnerHTML

Pour obtenir la fonctionnalité souhaitée, vous pouvez utiliser la propriété dangereusementSetInnerHTML. Cette propriété vous permet de définir directement le contenu HTML d'un élément sous forme de chaîne. Voici un exemple de la façon dont vous pouvez l'utiliser :

<code class="jsx">render: function() {
    const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

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

En attribuant la valeur de chaîne de votre code HTML à la variable thisIsMyCopy, puis en la définissant comme valeur __html de dangerlySetInnerHTML, vous pouvez insérer efficacement le contenu HTML souhaité. dans votre composant React. Cela entraînera le rendu du code HTML dans l'élément comme prévu.

Considérations supplémentaires

Il est important de noter que dangereusementSetInnerHTML peut constituer un risque pour la sécurité s'il n'est pas géré correctement. Il vous permet de restituer du HTML arbitraire, ce qui peut potentiellement introduire des vulnérabilités XSS. Par conséquent, il est crucial de s’assurer que le contenu HTML que vous injectez est fiable et provient d’une source fiable.

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!