React函数组件中使用useRef调用类组件方法的实现方案

情况1：子组件是类组件 #

如果你的MyComponent还是类组件，理论上函数父组件用useRef可以正常获取组件实例并调用focus方法。如果调用无效，排查以下几点：

• 确认someStateVariableChanged确实触发了useEffect执行，可添加console.log验证
• 确保MyComponent已挂载完成（未被条件渲染隐藏），myRef.current不为null
• 检查MyComponent内部的focus方法逻辑是否正确

示例代码：

// 类组件子组件
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focus() {
    this.inputRef.current?.focus();
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}

// 函数父组件
function MyParentComponent(props) {
  const myRef = useRef(null);
  const [someState, setSomeState] = useState(false);

  useEffect(() => {
    if (myRef.current) {
      myRef.current.focus();
    }
  }, [someState]);

  return (
    <>
      <button onClick={() => setSomeState(prev => !prev)}>触发聚焦</button>
      <MyComponent ref={myRef} />
    </>
  );
}

情况2：子组件是函数组件 #

如果MyComponent改成了函数组件，由于函数组件没有实例，默认无法通过ref直接获取并调用内部方法。此时需要用React.forwardRef配合useImperativeHandle暴露外部可调用的方法：

示例代码：

// 函数子组件：通过forwardRef和useImperativeHandle暴露方法
import { forwardRef, useImperativeHandle, useRef } from 'react';

const MyComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  // 定义要暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    }
  }));

  return <input ref={inputRef} />;
});

// 函数父组件：正常使用useRef调用方法
function MyParentComponent(props) {
  const myRef = useRef(null);
  const [someState, setSomeState] = useState(false);

  useEffect(() => {
    if (myRef.current) {
      myRef.current.focus();
    }
  }, [someState]);

  return (
    <>
      <button onClick={() => setSomeState(prev => !prev)}>触发聚焦</button>
      <MyComponent ref={myRef} />
    </>
  );
}

通用注意事项 #

• 调用子组件方法前务必检查myRef.current是否存在，避免组件未挂载或卸载后调用报错
• 优先通过状态传递（比如父组件传shouldFocus状态，子组件监听自动执行聚焦）实现功能，直接调用子组件内部方法会破坏组件封装性

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