Wie kann man HTML-Variablen mit „dangerouslySetInnerHTML“ sicher in JSX einfügen?

Einbetten von React-Variablen in JSX: Ein Zaubertrick mit hazardlySetInnerHTML

In React kann die nahtlose Integration von HTML mit Variablen in Ihrem JSX-Code eine Herausforderung sein heikles Geschäft. Angenommen, Sie haben eine React-Variable, die HTML-Markup enthält, etwa:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

Um diesen HTML-Code in Ihre React-Komponente einzufügen, könnten Sie versucht sein, etwas zu tun wie:

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

Allerdings Bei diesem Ansatz wird der HTML-Code nicht auf magische Weise wie erwartet gerendert. Dazu müssen Sie eine spezielle React-Eigenschaft verwenden: hazardlySetInnerHTML.

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

Mit hazardlySetInnerHTML behandelt React den Wert der Variablen als vertrauenswürdiges HTML und rendert ihn direkt. Dies ermöglicht Ihnen das dynamische Einfügen von HTML-Snippets in Ihre Komponente und sorgt so für Flexibilität und Effizienz.

Achtung: Mit Vorsicht verwenden

dangerouslySetInnerHTML ist ein leistungsstarkes Tool, das jedoch mitgeliefert wird eine Sicherheitswarnung. Da Sie damit HTML direkt in Ihre React-Anwendung einbetten können, kann es möglicherweise zu Sicherheitslücken wie XSS-Angriffen kommen. Verwenden Sie diese Eigenschaft daher immer mit Vorsicht und nur, wenn es unbedingt erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie kann man HTML-Variablen mit „dangerouslySetInnerHTML“ sicher in JSX einfügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!