ReactJS中如何通过指定ref引用克隆对应元素

该需求可以实现，你当前写法的核心问题是入参不符合React.cloneElement的要求。

错误原因 #

• React.cloneElement的第一个参数必须是React元素对象，而你传入的elementRef是useRef返回的引用容器，其current属性在组件挂载后存储的是真实DOM节点，并非React元素，因此无法直接用于克隆。

推荐实现方案 #

最稳妥的实现方式是提前将需要克隆的目标元素定义为React元素变量，再基于该变量执行克隆操作，同时也可以正常给原始元素绑定ref，完整实现代码如下：

import "./styles.css";
import React, { useRef } from "react"

export default function App() {
  const elementRef = useRef();
  // 提前定义需要克隆的目标元素
  const targetElement = (
    <div 
      className="div-style"
      ref={elementRef}
    >
      div original
    </div>
  );
  // 克隆React元素，第二个参数可传入新的props覆盖原有属性
  const clonedElement = React.cloneElement(targetElement, {
    className: "div-style cloned" // 示例：给克隆元素新增类名做区分
  });

  return (
    <div className="App">
      <h1>Test React.cloneElement()</h1>
      <h2>我想要复制以下这个div：</h2>
      {/* 渲染原始元素 */}
      {targetElement}

      <span> 复制结果： </span>
      {/* 渲染克隆后的元素 */}
      {clonedElement}
    </div>
  );
}

补充说明 #

• 上述方案克隆得到的是独立的React元素，和原始元素互不干扰，各自绑定的ref也会指向对应的真实DOM节点。
• 如果你需要克隆已经挂载的真实DOM的运行时状态（比如用户输入的表单值、动态修改的DOM属性），可以使用原生DOM API elementRef.current.cloneNode(true) 实现深克隆，注意该方式克隆的DOM不会保留React侧绑定的事件监听，需要自行重新绑定。

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