如何通过React.cloneElement与render prop向类组件传递ref

这个问题我之前也踩过坑，核心在于类组件和函数组件对ref的处理机制不一样，再加上你用了render-prop模式，得先正确拿到子元素再附加ref才行。下面给你一步步拆解解决方案：

问题核心原因 #

1. 函数组件默认不接收ref：普通函数组件无法直接接收父组件传递的ref，必须通过React.forwardRef包装后才能接收并传递到内部DOM元素。
2. 类组件的ref指向实例而非DOM：直接给类组件传ref，拿到的是组件实例，不是内部的DOM元素。如果要绑定鼠标事件这类DOM操作，得让类组件主动把DOM ref暴露出来。
3. render-prop模式的特殊处理：你的children是一个函数（返回子元素），不能直接对这个函数用React.cloneElement，得先执行函数拿到实际的React元素再处理。

具体解决方案 #

1. 先修正父组件的render-prop逻辑 #

首先要确保你在父组件里先执行render-prop函数拿到子元素，再附加ref：

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

const MouseTracker = ({ children }) => {
  const childRef = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (e) => {
    setPosition({ x: e.clientX, y: e.clientY });
  };

  useEffect(() => {
    const domElement = childRef.current;
    if (domElement) {
      domElement.addEventListener('mousemove', handleMouseMove);
      // 组件卸载时清理事件
      return () => domElement.removeEventListener('mousemove', handleMouseMove);
    }
  }, []);

  // 关键：先执行render-prop函数，拿到实际的子元素
  const childElement = children({ position });

  // 确认是有效React元素后，附加ref并渲染
  if (React.isValidElement(childElement)) {
    return React.cloneElement(childElement, { ref: childRef });
  }

  return childElement;
};

2. 处理函数组件：用React.forwardRef包装 #

普通函数组件无法接收ref，必须用forwardRef让它能接收ref并传递给内部DOM：

// 给函数组件添加forwardRef支持
const MyFunctionalChild = React.forwardRef((props, ref) => {
  // 将父组件传递的ref绑定到实际的DOM元素上
  return <div ref={ref} {...props}>
    鼠标位置：{props.position.x}, {props.position.y}
  </div>;
});

3. 处理类组件：用forwardRef+自定义prop传递DOM ref #

类组件的ref默认指向实例，要获取内部DOM，需要手动把DOM ref通过自定义prop（比如innerRef）暴露出来，再用forwardRef包装：

// 原始类组件
class MyClassChild extends React.Component {
  render() {
    // 将innerRef绑定到内部DOM元素
    return <div ref={this.props.innerRef} {...this.props}>
      鼠标位置：{this.props.position.x}, {this.props.position.y}
    </div>;
  }
}

// 用forwardRef包装，让父组件能直接传递ref到DOM元素
const ForwardedClassChild = React.forwardRef((props, ref) => {
  return <MyClassChild innerRef={ref} {...props} />;
});

4. 使用示例 #

现在不管是函数组件还是类组件，都能正常被父组件获取ref并绑定鼠标事件了：

const App = () => {
  return (
    <MouseTracker>
      {(state) => <ForwardedClassChild position={state.position} />}
    </MouseTracker>
  );
};

额外说明 #

如果你的需求只是操作类组件的实例方法（而非DOM），那直接获取类实例的ref是没问题的——比如childRef.current.myInstanceMethod()。但如果是绑定DOM事件这类操作，还是推荐用上面的方式获取DOM元素，避免使用已废弃的ReactDOM.findDOMNode。

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