Comment insérer dynamiquement du contenu HTML à l'aide d'instructions de variable React (JSX) ?

Insérer du HTML avec des instructions de variable React (JSX)

Dans le développement React, vous pouvez rencontrer le besoin d'incorporer du contenu HTML de manière dynamique à l'aide de la variable React déclarations (JSX). Cette question cherche une solution pour insérer du HTML stocké dans une variable dans un composant React et le rendre comme prévu.

La clé pour y parvenir réside dans l'utilisation de l'attribut dangereusementSetInnerHTML. Cet attribut vous permet de définir directement le HTML interne d'un élément, vous permettant d'injecter du contenu HTML de manière dynamique.

Pour utiliser l'attribut DangerlySetInnerHTML, vous pouvez modifier votre code comme suit :

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

Dans ce code, la variable thisIsMyCopy contient le contenu HTML que vous souhaitez insérer. L'attribut dangereusementSetInnerHTML définit ensuite le code HTML interne du fichier

à la valeur de thisIsMyCopy, ce qui entraîne le rendu du contenu HTML comme prévu.

Il est important de noter que l'utilisation de wonderfullySetInnerHTML doit être effectuée avec prudence, car elle peut introduire des vulnérabilités de sécurité potentielles. Il est recommandé de l'utiliser uniquement lorsque cela est nécessaire et de nettoyer soigneusement le contenu HTML avant de le configurer.

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!

html for using Attribute this

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