如何在 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中文网其他相关文章！