如何在 React 中安全地將 HTML 字串渲染為 JSX？

在React 中將HTML 字串轉換為可渲染的JSX

引入React 困境

顯示時在ReactJS 中透過AJAX當請求接收資料時，開發人員經常遇到一個常見問題：資料顯示為純文字而不是渲染的 HTML。發生這種情況是由於 React 轉義 HTML 內容以防止跨站腳本 (XSS) 漏洞的預設行為。

揭曉解決方案

為了解決這個挑戰，React 提供了angerlySetInnerHTML 屬性。透過利用此屬性，開發人員可以將 HTML 字串呈現為 React 元素。但是，需要注意的是，這種方法有固有風險，應謹慎使用。

制定解決方案

為了說明angerouslySetInnerHTML 的用法，請考慮以下內容範例：

<td dangerouslysetinnerhtml="{{" __html: this.state.actions></td>

在此程式碼中，來自此程式碼中，來自AJAX 回應的HTML 字串（儲存在this.state.actions) 在td 元素中呈現。這使得 HTML 內容能夠在 React 應用程式中正確顯示。

注意事項

雖然angerouslySetInnerHTML 解決了 HTML 渲染問題，但在使用時保持警惕至關重要此屬性。 HTML 字串中任何潛在的 XSS 漏洞都可能危及應用程式的安全性。建議在 React 中渲染 HTML 內容之前使用伺服器端清理技術來確保 HTML 內容的完整性。

以上是如何在 React 中安全地將 HTML 字串渲染為 JSX？的詳細內容。更多資訊請關注PHP中文網其他相關文章！