如何使用「dangerouslySetInnerHTML」將 HTML 變數安全地註入 JSX 中？

在JSX 中嵌入React 變數：使用angerouslySetInnerHTML 的魔術

在React 中整合，將HTML 與JSX 程式碼中的變數無縫JSX 程式碼中的變數無縫可以是一個簡單的方法。棘手的事情。假設您有一個包含HTML 標記的React 變量，例如：

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

要將此HTML 插入到您的React 元件中，您可能會想要執行以下操作：

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

但是，這種方法不會像您期望的那樣神奇地呈現HTML。為此，您需要使用一個特殊的 React 屬性：dangerouslySetInnerHTML。

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

使用angerouslySetInnerHTML，React 會將變數的值視為受信任的 HTML 並直接渲染它。這允許您動態地將 HTML 片段插入到元件中，從而提供靈活性和效率。

注意：小心使用

dangerouslySetInnerHTML 是一個強大的工具，但它附帶安全警告。由於它允許您直接將 HTML 嵌入到 React 應用程式中，因此可能會引入安全漏洞，例如 XSS 攻擊。因此，請務必謹慎使用此屬性，並且僅在絕對必要時使用。

以上是如何使用「dangerouslySetInnerHTML」將 HTML 變數安全地註入 JSX 中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！