如何在React中从状态变量呈现HTML对象？

import React, { useState } from 'react';

function HtmlComponent() {
  const [htmlContent, setHtmlContent] = useState('<h1>Hello World</h1><p>This is a paragraph.</p>');

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
  );
}

export default HtmlComponent;

import React, { useState, useEffect } from 'react';
import DOMPurify from 'dompurify';

function HtmlComponent() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    // 假设fetchHtmlContent是一个异步函数，用于获取HTML内容
    fetchHtmlContent().then(content => {
      // 使用DOMPurify清理HTML内容
      const cleanContent = DOMPurify.sanitize(content);
      setHtmlContent(cleanContent);
    });
  }, []);

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
  );
}

export default HtmlComponent;