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!

source：php.cn

Article précédent：Pourquoi mon modal Bootstrap apparaît-il derrière le fondu en arrière-plan ? Article suivant：Comment ajouter des mois à une date en JavaScript : un guide étape par étape

Déclaration de ce site Web

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

Derniers articles par auteur

• Pourquoi est-ce que j'obtiens une erreur « Utilisation d'une connexion réseau fermée » dans le réseau net/http de Go ?
  2024-11-23 13:01:14
• Pourquoi mon instruction PHP Include génère-t-elle une erreur Path Not Found ?
  2024-11-23 13:00:13
• Comment analyser l'entrée d'un formulaire HTML dans Go ?
  2024-11-23 12:59:11
• Comment analyser efficacement JSON dans Kotlin ?
  2024-11-23 12:58:10
• Puis-je inclure des fichiers distants dans PHP ? Surmonter les restrictions `allow_url_include`.
  2024-11-23 12:57:17
• [0] ThrowableError in Index.php line 220

  语法解析错误: syntax error, unexpected '}'

          if($res){
              return json_encode(array('code'=>1,'msg'=>'成功'));
          }else{
              return json_encode(array('code'=>0,'msg'=>'失败'));
          }
      }
  
      public function 
  
  }
  

  Call Stack

  1. in Index.php line 220
  2. at think\__include_file() in Loader.php line 85
  3. at Loader::autoload()
  4. at spl_autoload_call()
  5. at class_exists() in Loader.php line 478
  6. at Loader::controller() in App.php line 580
  7. at App::module() in App.php line 456
  8. at App::exec() in App.php line 139
  9. at App::run() in start.php line 19
  10. at require('/data/wwwroot/td.880...') in index.php line 23

  Environment Variables

  GET Data

  content

  NYT Strands Answers And Hints - November 21, 2024 Solution #263

  to

  fr

  POST Data

  empty

  Files

  empty

  Cookies

  myip

  65.21.47.162

  Session

  empty

  Server/Request Data

  TEMP

  /tmp

  TMPDIR

  /tmp

  TMP

  /tmp

  PATH

  /usr/local/bin:/usr/bin:/bin

  USER

  www

  HOME

  /home/www

  HTTP_CONTENT_TYPE

  application/x-www-form-urlencoded;charset=UTF-8

  HTTP_CONNECTION

  Keep-Alive

  HTTP_COOKIE

  myip=65.21.47.162

  HTTP_ACCEPT_ENCODING

  gzip

  HTTP_ACCEPT

  */*

  HTTP_USER_AGENT

  Mozilla/5.0 (Linux; Android 6.0.1; OPPO A57 Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/63.0.3239.83 Mobile Safari/537.36 T7/10.13 baiduboxapp/10.13.0.10 (Baidu; P1 6.0.1)

  HTTP_HOST

  td.880772.xyz

  PATH_INFO

  /api/index/fanyi_article_title

  REDIRECT_STATUS

  200

  SERVER_NAME

  td.880772.xyz

  SERVER_PORT

  443

  SERVER_ADDR

  188.165.242.95

  REMOTE_PORT

  63110

  REMOTE_ADDR

  65.21.47.162

  SERVER_SOFTWARE

  nginx/1.20.2

  GATEWAY_INTERFACE

  CGI/1.1

  HTTPS

  on

  REQUEST_SCHEME

  https

  SERVER_PROTOCOL

  HTTP/1.1

  DOCUMENT_ROOT

  /data/wwwroot/td.880772.xyz/public

  DOCUMENT_URI

  /index.php

  REQUEST_URI

  /api/index/fanyi_article_title?content=NYT+Strands+Answers+And+Hints+-+November+21%2C+2024+Solution+%23263&to=fr

  SCRIPT_NAME

  /index.php

  CONTENT_LENGTH

  CONTENT_TYPE

  application/x-www-form-urlencoded;charset=UTF-8

  REQUEST_METHOD

  GET

  QUERY_STRING

  s=/api/index/fanyi_article_title&content=NYT+Strands+Answers+And+Hints+-+November+21%2C+2024+Solution+%23263&to=fr

  SCRIPT_FILENAME

  /data/wwwroot/td.880772.xyz/public/index.php

  PHP_VALUE

  open_basedir=/data/wwwroot/td.880772.xyz/public:/tmp/:/proc/:/data/wwwroot/td.880772.xyz/

  FCGI_ROLE

  RESPONDER

  PHP_SELF

  /index.php

  REQUEST_TIME_FLOAT

  1732337817.049

  REQUEST_TIME

  1732337817

  Environment Variables

  empty

  ThinkPHP Constants

  PUBLIC_PATH

  /data/wwwroot/td.880772.xyz/public/../public/

  APP_PATH

  /data/wwwroot/td.880772.xyz/public/../application/

  THINK_VERSION

  5.0.24

  THINK_START_TIME

  1732337817.0494

  THINK_START_MEM

  410192

  EXT

  .php

  DS

  /

  THINK_PATH

  /data/wwwroot/td.880772.xyz/thinkphp/

  LIB_PATH

  /data/wwwroot/td.880772.xyz/thinkphp/library/

  CORE_PATH

  /data/wwwroot/td.880772.xyz/thinkphp/library/think/

  TRAIT_PATH

  /data/wwwroot/td.880772.xyz/thinkphp/library/traits/

  ROOT_PATH

  /data/wwwroot/td.880772.xyz/

  EXTEND_PATH

  /data/wwwroot/td.880772.xyz/extend/

  VENDOR_PATH

  /data/wwwroot/td.880772.xyz/vendor/

  RUNTIME_PATH

  /data/wwwroot/td.880772.xyz/runtime/

  LOG_PATH

  /data/wwwroot/td.880772.xyz/runtime/log/

  CACHE_PATH

  /data/wwwroot/td.880772.xyz/runtime/cache/

  TEMP_PATH

  /data/wwwroot/td.880772.xyz/runtime/temp/

  CONF_PATH

  /data/wwwroot/td.880772.xyz/public/../application/

  CONF_EXT

  .php

  ENV_PREFIX

  PHP_

  IS_CLI

  false

  IS_WIN

  false

  FILTER_VALIDATE_BOOL

  258

  ADDON_PATH

  /data/wwwroot/td.880772.xyz/addons/

  ThinkPHP V5.0.24 { 十年磨一剑-为API开发设计的高性能框架 }
  2024-11-23 12:56:12
• Véritable tri alphanumérique/naturel dans MySQL - pourquoi la réponse est-elle toujours récursive ?
  2024-11-23 12:55:15
• Comment le trait `is_base_of` de C exploite-t-il la surcharge des opérateurs et la métaprogrammation des modèles pour déterminer les relations d'héritage ?
  2024-11-23 12:50:10
• Comment puis-je traiter efficacement les réponses HTTP asynchrones dans les services AngularJS pour mettre à jour l'interface utilisateur ?
  2024-11-23 12:49:13
• Comment copier des données d'une table MySQL à une autre à l'aide de requêtes ?
  2024-11-23 12:48:13

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

2

1961

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

10

2122

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

1790

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1689

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

1697

Rubriques connexes

Plus>

• Y a-t-il une grande différence entre le langage C et Python ?
• qu'est-ce que le pissenlit
• Sur quel échange se trouve Sols Inscription Coin ?
• Pièce de dragon d'inscription Bitcoin
• La différence entre le Wi-Fi et le Wi-Fi
• Linux afficher les informations sur la version
• Application de trading de devises numériques
• Comment résoudre une erreur de script