函数式组件如何调用子组件方法？

在 React 函数组件中，父组件要“调用子组件方法”，主流做法是 ref + forwardRef + useImperativeHandle。

标准写法

import React, { useRef, forwardRef, useImperativeHandle } from "react";

type ChildRef = {
  focusInput: () => void;
};

const Child = forwardRef<ChildRef>((_, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focusInput() {
      inputRef.current?.focus();
    },
  }));

  return <input ref={inputRef} placeholder="子组件输入框" />;
});

export default function Parent() {
  const childRef = useRef<ChildRef>(null);

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current?.focusInput()}>
        调用子组件方法
      </button>
    </div>
  );
}

面试补充点

• 不建议频繁“命令式调用”；优先通过 props/状态驱动。
• 需要暴露少量 imperative 能力（如 focus、scrollTo）时再用这个方案。