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

在ReactJS 中將HTML 字符串轉換為JSX

問題描述：

顯示HTML 資料時透過ReactJS 中的AJAX檢索，資料通常顯示為純文字而不是渲染的 HTML 元素。這是由於 React 的預設行為是轉義 HTML 以防止跨站腳本漏洞。

解決方案：

將 HTML 字串轉換為 JSX 並將其顯示為渲染的 HTML元素，您可以使用 dangerouslySetInnerHTML 屬性。此屬性可讓您直接設定元素的內部 HTML 內容。

實作：

要使用 dangerouslySetInnerHTML 屬性，您需要將其綁定到包含 HTML 內容作為字串的物件。該物件應具有以下結構：

{ __html: 'Your HTML content' }

以下是如何在ReactJS 中使用dangerouslySetInnerHTML 屬性的範例：

import React, { useState } from 'react';

const MyComponent = () => {
  const [htmlContent, setHtmlContent] = useState('');

  const handleHtml = (data) => {
    setHtmlContent(data.html);
  };

  return (
    <div>
      <button onClick={() => handleHtml({ html: '<h1>Hello, React!</h1>' })}>Load HTML</button>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  );
};

export default MyComponent;

在此範例中，dangerouslySetInnerHTML屬性用於渲染從handleHtml 函數作為渲染的 HTML 元素。

警告：

使用 dangerouslySetInnerHTML 屬性可能會帶來安全風險，如果HTML 內容未正確清理。在使用此屬性之前，請務必確保您呈現的 HTML 內容是安全且可信的。

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