Comment injecter en toute sécurité des variables HTML dans JSX avec « dangereusementSetInnerHTML » ?

Intégrer des variables React dans JSX : un tour de magie avec dangereusementSetInnerHTML

Dans React, intégrer de manière transparente du HTML avec des variables dans votre code JSX peut être un affaire délicate. Supposons que vous ayez une variable React contenant un balisage HTML, comme :

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

Pour insérer ce code HTML dans votre composant React, vous pourriez être tenté de faire quelque chose comme :

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

Cependant, cette approche ne rendra pas comme par magie le HTML comme prévu. Pour ce faire, vous devez utiliser une propriété React spéciale : dangereusementSetInnerHTML.

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

Avec dangereusementSetInnerHTML, React traitera la valeur de la variable comme du HTML de confiance et la restituera directement. Cela vous permet d'insérer dynamiquement des extraits de code HTML dans votre composant, offrant flexibilité et efficacité.

Attention : à utiliser avec précaution

dangerouslySetInnerHTML est un outil puissant, mais il est livré avec un avertissement de sécurité. Parce qu'il vous permet d'intégrer directement du HTML dans votre application React, il peut potentiellement introduire des vulnérabilités de sécurité, telles que des attaques XSS. Utilisez donc toujours cette propriété avec prudence et uniquement lorsque cela est absolument nécessaire.

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!