Wie rendere ich HTML-Strings als echtes HTML in React?

HTML-Zeichenfolgen als echtes HTML rendern

In Ihrer React-Anwendung stehen Sie vor einem Problem, bei dem eine Zeichenfolge mit HTML-Inhalten als echtes HTML gerendert wird Text statt richtigem HTML-Markup. Um dieses Problem zu lösen, ist es wichtig, die folgenden Punkte zu verstehen:

1. Ist this.props.match.description ein String?
   Wenn es ein String ist, sollte er konvertiert werden problemlos in HTML umwandeln. Stellen Sie sicher, dass die Zeichenfolge ordnungsgemäß in doppelte oder einfache Anführungszeichen eingeschlossen ist.

2. HTML-Entitäten:
   Wenn Ihre HTML-Beschreibung Sonderzeichen oder HTML-Entitäten enthält, müssen Sie dies tun dekodieren Sie sie, bevor Sie hazardlySetInnerHTML verwenden. Dies kann mit einer Funktion wie decodeEntities erfolgen.

   decodeEntities(input) {
     var e = document.createElement('div');
     e.innerHTML = input;
     return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
   }

3. Verwendung:
   Hier ist ein funktionierendes Beispiel:

   class App extends React.Component {
     constructor() {
       super();
       this.state = {
         description: '<h1>

Wenn Sie diese Tipps befolgen, können Sie HTML-Strings erfolgreich als echtes HTML-Markup in Ihrer React-Anwendung rendern.

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