Wie rendere ich HTML-Strings in React sicher mit dangerouslySetInnerHTML?

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 Eigenschaft, die in hazardlySetInnerHTML verwendet wird, ein Objekt und keine Zeichenfolge ist.

Um dieses Problem zu beheben, stellen Sie sicher, dass die Eigenschaft this.props.match.description eine Zeichenfolge 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

Bedenken Sie den folgenden Beispielcode:

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

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

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

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

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

übergeben wird

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