Wie werden HTML-Strings in React richtig gerendert?

HTML-Zeichenfolgen als echtes HTML rendern

Beim Versuch, HTML-Inhalte als echtes HTML anzuzeigen, können bestimmte Szenarien zu unerwarteten Ergebnissen führen, wenn die Zeichenfolge wird als Text gerendert und nicht als HTML interpretiert. Um dieses Problem zu beheben, muss unbedingt sichergestellt werden, dass die HTML-Zeichenfolge in doppelte Anführungszeichen gesetzt und bei Bedarf dekodiert wird.

Ein Ansatz zur Lösung dieses Problems besteht darin, die HTML-Zeichenfolge in doppelte Anführungszeichen innerhalb der Eigenschaft „dangerouslySetInnerHTML“ zu setzen im folgenden Beispiel demonstriert:

<div dangerouslySetInnerHTML={{ __html: '" <h1>Hi there!</h1>" ' }} />

Wenn die HTML-Zeichenfolge jedoch als Objekt gespeichert wird, wird sie nicht als HTML gerendert. In solchen Fällen muss das Objekt in einen String umgewandelt werden, bevor es hazardlySetInnerHTML zugewiesen wird.

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: {
        children: "something",
        style: {
          color: "red"
        }
      }
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: JSON.stringify(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Außerdem ist es bei der Verarbeitung von HTML-Entitäten innerhalb des HTML-Strings wichtig, diese zu dekodieren, bevor sie hazardlySetInnerHTML zugewiesen werden . Dies kann mit der Funktion htmlDecode erreicht werden:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p>&amp;lt;strong&amp;gt;Our Opportunity:&amp;lt;/strong&amp;gt;</p>'
    }
  }

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

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

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