如何在 JSX 中使用 React 變數注入 HTML 內容？

在JSX 中將HTML 與React 變數合併

您正在使用React 建立應用程序，並且需要能夠使用React 變數插入HTML 內容你的JSX。以下是實現此目的的解決方案：

利用angerouslySetInnerHTML

要實現所需的功能，您可以使用dangerouslySetInnerHTML 屬性。此屬性可讓您直接將元素的 HTML 內容設定為字串。以下是如何使用它的範例：

<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>

透過將HTML 的字串值指派給thisIsMyCopy 變量，然後將其設定為angerlySetInnerHTML 的__html 值，您可以有效地插入所需的HTML 內容在你的React 元件中。這將導致 HTML 按預期在元素內呈現。

其他注意事項

需要注意的是，如果處理不當，dangerouslySetInnerHTML 可能會帶來安全風險。它允許您呈現任意 HTML，這可能會引入 XSS 漏洞。因此，確保您注入的 HTML 內容是可信任的並且來自可靠的來源至關重要。

以上是如何在 JSX 中使用 React 變數注入 HTML 內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！