如何在React中通过ID克隆HTML元素？解决实现报错问题

你的两种写法为什么报错？ #

1. 直接返回原生DOM元素
   第一个例子里，你把document.querySelector('#svg')获取到的原生DOM对象存入state并直接返回，React只能渲染虚拟DOM元素（JSX或React.createElement创建的对象），无法直接渲染真实的DOM节点，因此触发“对象不能作为React子元素”的错误。

2. 误用React.cloneElement处理原生DOM
   React.cloneElement的作用是克隆React元素（比如JSX节点），而非原生DOM节点。你传入的document.querySelector('#svg')是真实HTML元素，不符合该方法的参数要求，导致返回undefined，进而出现“元素类型无效”的错误。

正确的实现方式 #

根据需求，提供两种可行方案：

方案1：插入已有DOM元素的HTML内容

如果#svg是页面中已存在的元素，可以获取它的HTML字符串，通过dangerouslySetInnerHTML插入到React组件中：

import { useEffect, useState } from 'react';

function ClonedSvg() {
  const [svgHtml, setSvgHtml] = useState('');

  useEffect(() => {
    const svgElement = document.querySelector('#svg');
    if (svgElement) {
      setSvgHtml(svgElement.outerHTML);
    }
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: svgHtml }} />;
}

export default ClonedSvg;

⚠️ 注意：dangerouslySetInnerHTML存在XSS风险，若SVG内容不可信，谨慎使用。

方案2：将SVG转为React组件（推荐）

若该SVG是项目内资源，更规范的做法是将其转为React组件：

• 直接把SVG代码复制到JSX中作为组件返回：

function MySvg() {
  return (
    <svg viewBox="0 0 100 100">
      {/* 替换为你的SVG内容 */}
      <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
  );
}

// 复用组件
function App() {
  return <MySvg />;
}

• 或使用svg-loader类工具，直接导入SVG作为React组件：

import { ReactComponent as MySvg } from './my-svg.svg';

function App() {
  return <MySvg />;
}

这种方式符合React开发模式，无DOM操作副作用，且更易维护。

内容的提问来源于stack exchange，提问作者Roman