如何将加载外部html的html模板转换为reactjs

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

function ExternalHtmlTemplate() {
  const [templateContent, setTemplateContent] = useState('');

  useEffect(() => {
    // 加载外部HTML模板
    fetch('external-template.html')
      .then(response => response.text())
      .then(content => {
        setTemplateContent(content);
      });
  }, []);

  useEffect(() => {
    if (templateContent) {
      // 解析HTML模板
      const parser = new DOMParser();
      const doc = parser.parseFromString(templateContent, 'text/html');

      // 转换为React元素
      const reactElements = Array.from(doc.body.children).map(element => {
        const { tagName, attributes, innerHTML } = element;
        const props = Array.from(attributes).reduce((props, attr) => {
          props[attr.name] = attr.value;
          return props;
        }, {});

        return React.createElement(tagName, props, innerHTML);
      });

      // 渲染React组件
      ReactDOM.render(
        <div>{reactElements}</div>,
        document.getElementById('root')
      );
    }
  }, [templateContent]);

  return <div id="root"></div>;
}

export default ExternalHtmlTemplate;