HTML-Zeichenfolgen sicher als HTML rendern

In diesem Szenario tritt das Problem auf, wenn versucht wird, eine normale Zeichenfolge mit HTML-Inhalten darzustellen, dies jedoch nicht der Fall ist erscheint stattdessen als String, ohne als HTML interpretiert zu werden. Dies tritt typischerweise dann auf, wenn die in „dangerouslySetInnerHTML“ verwendete Eigenschaft ein Objekt und kein String ist.

Um dieses Problem zu beheben, stellen Sie sicher, dass die Eigenschaft „this.props.match.description“ ein String ist. Ist dies nicht der Fall, konvertieren Sie es in HTML, bevor Sie es der Eigenschaft zuweisen.

Umgang mit HTML-Entitäten

Beim Umgang mit HTML-Entitäten treten zusätzliche Komplikationen auf. In solchen Fällen müssen Sie die Entitäten dekodieren, bevor Sie sie an hazardlySetInnerHTML übergeben.

Beispielcode

Betrachten Sie den folgenden Beispielcode:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      description: '
Our Opportunity:
',
    };
  }

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

  render() {
    return (
      

    );
  }
}

ReactDOM.render(, document.getElementById('root'));

In diesem Beispiel enthält die Beschreibungseigenschaft HTML-Entitäten (). Um es korrekt darzustellen, wird die Funktion htmlDecode verwendet, um diese Entitäten zu dekodieren, bevor der HTML-Code an hazardlySetInnerHTML übergeben wird.