如何将React ref传递给深层嵌套的子组件？

首先明确核心逻辑：如果走显式逐层透传ref的路子，那确实需要每一层函数组件都用forwardRef——因为函数组件本身不接收ref属性，必须通过forwardRef把ref暴露出来才能往下传递。但这不是唯一解法，还有更简洁的替代方案：

1. 用Context传递Ref #

创建一个Context，把父组件的ref存入Context，深层子组件直接从Context中取出并绑定到目标元素，中间层组件完全不用管ref的传递逻辑。

示例代码：

// 创建Ref Context
const RefContext = React.createContext(null);

// 父组件
function Parent() {
  const targetRef = useRef(null);

  return (
    <RefContext.Provider value={targetRef}>
      <MiddleComponent />
    </RefContext.Provider>
  );
}

// 中间组件（无需处理ref）
function MiddleComponent() {
  return <DeepChild />;
}

// 深层子组件
function DeepChild() {
  const targetRef = useContext(RefContext);
  return <div ref={targetRef}>目标元素</div>;
}

2. 使用回调Ref #

父组件定义一个回调函数，把这个函数逐层传递（或结合Context传递），深层子组件将目标元素传给该回调，父组件就能直接拿到元素引用。

示例代码：

// 父组件
function Parent() {
  let targetElement = null;
  const setTargetElement = (el) => {
    targetElement = el;
  };

  return <MiddleComponent setTargetElement={setTargetElement} />;
}

// 中间组件（仅透传函数）
function MiddleComponent({ setTargetElement }) {
  return <DeepChild setTargetElement={setTargetElement} />;
}

// 深层子组件
function DeepChild({ setTargetElement }) {
  return <div ref={setTargetElement}>目标元素</div>;
}

3. 必要层级才用forwardRef（若必须透传） #

如果一定要通过props逐层传递ref，那每一层函数组件都得用forwardRef；类组件则不需要，类组件可直接处理ref传递。

示例代码：

// 父组件
function Parent() {
  const targetRef = useRef(null);
  return <MiddleComponent ref={targetRef} />;
}

// 中间组件：用forwardRef接收并透传
const MiddleComponent = React.forwardRef((props, ref) => {
  return <DeepChild ref={ref} />;
});

// 深层子组件：用forwardRef绑定到元素
const DeepChild = React.forwardRef((props, ref) => {
  return <div ref={ref}>目标元素</div>;
});

总结：如果觉得逐层forwardRef太繁琐，优先选Context或回调Ref方案，能大幅简化代码，避免多层透传的冗余。

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