Wie injiziere ich HTML-Inhalte mithilfe von React-Variablen in JSX?

HTML mit React-Variablen in JSX integrieren

Sie erstellen eine Anwendung mit React und benötigen die Möglichkeit, HTML-Inhalte mithilfe von React-Variablen darin einzufügen Dein JSX. Hier ist eine Lösung, um dies zu erreichen:

DangerouslySetInnerHTML verwenden

Um die gewünschte Funktionalität zu erreichen, können Sie die Eigenschaft dangerouslySetInnerHTML verwenden. Mit dieser Eigenschaft können Sie den HTML-Inhalt eines Elements direkt als String festlegen. Hier ist ein Beispiel dafür, wie Sie es verwenden können:

<code class="jsx">render: function() {
    const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

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

Indem Sie den String-Wert Ihres HTML-Codes der Variable thisIsMyCopy zuweisen und ihn dann als __html-Wert von hazardlySetInnerHTML festlegen, können Sie Ihren gewünschten HTML-Inhalt effektiv einfügen innerhalb Ihrer React-Komponente. Dies führt dazu, dass der HTML-Code innerhalb des Elements wie erwartet gerendert wird.

Zusätzliche Überlegungen

Es ist wichtig zu beachten, dass das gefährliche SetInnerHTML ein Sicherheitsrisiko darstellen kann, wenn es nicht ordnungsgemäß gehandhabt wird. Sie können damit beliebiges HTML rendern, was möglicherweise zu XSS-Schwachstellen führen kann. Daher ist es wichtig sicherzustellen, dass der von Ihnen eingefügte HTML-Inhalt vertrauenswürdig ist und aus einer zuverlässigen Quelle stammt.

Das obige ist der detaillierte Inhalt vonWie injiziere ich HTML-Inhalte mithilfe von React-Variablen in JSX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!