React中父组件如何优雅访问深层子组件Ref？

针对父组件需要访问深层子组件ref且不想逐层传递props的场景，React有两种优雅的内置方案：

方案一：Context + useImperativeHandle #

通过Context传递方法，结合useImperativeHandle暴露子组件的指定操作，无需暴露完整ref，兼顾封装性与需求：

1. 创建共享Context

import { createContext, useContext, useImperativeHandle, forwardRef, useState } from 'react';

// 创建用于传递输入框操作的Context
const InputContext = createContext(null);

2. 深层Inputbox组件暴露指定操作

// 用forwardRef包裹组件，配合useImperativeHandle定义要暴露给父组件的方法
const Inputbox = forwardRef((props, ref) => {
  const [value, setValue] = useState('');
  
  useImperativeHandle(ref, () => ({
    // 仅暴露清空输入框的方法
    clearInput: () => {
      setValue('');
    },
    // 按需添加其他需要暴露的方法
    getCurrentValue: () => value
  }));

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
});

3. 父组件注入Context并调用方法

function Parent() {
  const inputRef = useRef(null);

  const handleClear = () => {
    inputRef.current?.clearInput();
  };

  return (
    <InputContext.Provider value={inputRef}>
      <button onClick={handleClear}>清空输入框</button>
      <SubComponent1 />
    </InputContext.Provider>
  );
}

// 中间层级子组件无需处理ref，直接渲染即可
function SubComponent1() {
  return <SubComponent2 />;
}

function SubComponent2() {
  return <SubComponent3 />;
}

function SubComponent3() {
  const inputRef = useContext(InputContext);
  return <Inputbox ref={inputRef} />;
}

方案二：直接通过Context传递父组件ref #

如果需要直接操作输入框的原生DOM，可简化为通过Context传递父组件创建的ref：

1. 创建Context

const InputRefContext = createContext(null);

2. 父组件注入ref

function Parent() {
  const inputRef = useRef(null);

  const handleClear = () => {
    if (inputRef.current) {
      inputRef.current.value = '';
      inputRef.current.focus();
    }
  };

  return (
    <InputRefContext.Provider value={inputRef}>
      <button onClick={handleClear}>清空输入框</button>
      <SubComponent1 />
    </InputRefContext.Provider>
  );
}

3. 深层Inputbox组件绑定ref

function Inputbox() {
  const inputRef = useContext(InputRefContext);
  return <input ref={inputRef} />;
}

// 中间子组件无需修改
function SubComponent1() { return <SubComponent2 />; }
function SubComponent2() { return <SubComponent3 />; }
function SubComponent3() { return <Inputbox />; }

方案对比 #

• 方案一更安全：仅暴露业务需要的操作，避免父组件直接操作DOM，符合组件封装原则
• 方案二更直接：适合需要直接操作原生DOM的场景，但会破坏子组件的封装性

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