Comment puis-je restituer en toute sécurité des chaînes HTML au format JSX dans React ?

Conversion de chaînes HTML en JSX dans ReactJS

Description du problème :

Lors de l'affichage des données HTML récupérées via AJAX dans ReactJS, les données apparaissent souvent sous forme de texte brut plutôt que d'éléments HTML rendus. Cela est dû au comportement par défaut de React consistant à échapper le HTML pour éviter les vulnérabilités de scripts intersites.

Solution :

Pour convertir les chaînes HTML en JSX et les afficher sous forme de HTML rendu éléments, vous pouvez utiliser la propriété dangerouslySetInnerHTML. Cette propriété vous permet de définir directement le contenu HTML interne d'un élément.

Implémentation :

Pour utiliser la propriété dangerouslySetInnerHTML, vous devez liez-le à un objet qui contient le contenu HTML sous forme de chaîne. Cet objet doit avoir la structure suivante :

{ __html: 'Your HTML content' }

Voici un exemple d'utilisation de la propriété dangerouslySetInnerHTML dans ReactJS :

import React, { useState } from 'react';

const MyComponent = () => {
  const [htmlContent, setHtmlContent] = useState('');

  const handleHtml = (data) => {
    setHtmlContent(data.html);
  };

  return (
    <div>
      <button onClick={() => handleHtml({ html: '<h1>Hello, React!</h1>' })}>Load HTML</button>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  );
};

export default MyComponent;

Dans cet exemple, le La propriété dangerouslySetInnerHTML est utilisée pour restituer le contenu HTML récupéré du handleHtml fonctionne comme un élément HTML rendu.

Attention :

L'utilisation de la propriété dangerouslySetInnerHTML peut introduire des risques de sécurité si le Le contenu HTML n'est pas correctement nettoyé. Assurez-vous toujours que le contenu HTML que vous affichez est sûr et fiable avant d'utiliser cette propriété.

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!