Heim >Web-Frontend >js-Tutorial >Wie zeige ich HTML-Entitäten als echtes HTML in React mithilfe von hazardlySetInnerHTML an?

Wie zeige ich HTML-Entitäten als echtes HTML in React mithilfe von hazardlySetInnerHTML an?

Barbara Streisand
Barbara StreisandOriginal
2024-11-11 19:28:02472Durchsuche

How to Display HTML Entities as Real HTML in React using dangerouslySetInnerHTML?

HTML-String als echtes HTML rendern

In React kann hazardlySetInnerHTML verwendet werden, um HTML-Inhalte als echtes HTML anzuzeigen. Allerdings können Probleme auftreten, wenn dieses Attribut mit einem Zeichenfolgenwert verwendet wird.

Ein häufiges Szenario ist, wenn this.props.match.description eine Zeichenfolge ist, die HTML enthält, aber als Zeichenfolge und nicht als HTML gerendert wird. Dies geschieht aufgrund möglicher HTML-Entitäten in der Zeichenfolge.

Um dieses Problem zu beheben, sollten Sie die HTML-Entitäten dekodieren, bevor Sie sie an hazardlySetInnerHTML übergeben. Hier ist ein Beispiel:

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

Das obige ist der detaillierte Inhalt vonWie zeige ich HTML-Entitäten als echtes HTML in React mithilfe von hazardlySetInnerHTML an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn