Wie kann ich HTML-Strings in React sicher als JSX rendern?

HTML-Strings in JSX in ReactJS konvertieren

Problembeschreibung:

Beim Anzeigen von HTML-Daten Über AJAX in ReactJS abgerufen, erscheinen die Daten oft als einfacher Text und nicht als gerenderte HTML-Elemente. Dies liegt an Reacts Standardverhalten, HTML zu maskieren, um Cross-Site-Scripting-Schwachstellen zu verhindern.

Lösung:

Um HTML-Strings in JSX zu konvertieren und sie als gerendertes HTML anzuzeigen Elemente können Sie die Eigenschaft dangerouslySetInnerHTML verwenden. Mit dieser Eigenschaft können Sie den inneren HTML-Inhalt eines Elements direkt festlegen.

Implementierung:

Um die Eigenschaft dangerouslySetInnerHTML zu verwenden, müssen Sie Folgendes tun Binden Sie es an ein Objekt, das den HTML-Inhalt als Zeichenfolge enthält. Dieses Objekt sollte die folgende Struktur haben:

{ __html: 'Your HTML content' }

Hier ist ein Beispiel für die Verwendung der dangerouslySetInnerHTML-Eigenschaft in 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;

In diesem Beispiel ist das Die Eigenschaft dangerouslySetInnerHTML wird zum Rendern des aus dem abgerufenen HTML-Inhalts verwendet handleHtml fungiert als gerendertes HTML-Element.

Achtung:

Die Verwendung der Eigenschaft dangerouslySetInnerHTML kann Sicherheitsrisiken mit sich bringen, wenn die HTML-Inhalte werden nicht ordnungsgemäß bereinigt. Stellen Sie immer sicher, dass der von Ihnen gerenderte HTML-Inhalt sicher und vertrauenswürdig ist, bevor Sie diese Eigenschaft verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich HTML-Strings in React sicher als JSX rendern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!