react 函数组件父组件根据ref执行子组件方法

### 实现父组件调用子组件方法

在 React 中，`forwardRef` 和 `useImperativeHandle` 是两个重要的 API，用于使父组件能够访问子组件内部的方法或属性。对于函数式组件而言，具体实现如下：

#### 子组件定义

子组件需导入必要的 Hook 并利用 `forwardRef` 将 ref 传递进来，在此过程中结合 `useImperativeHandle` 定制可被外部访问的行为。

import React, { useImperativeHandle, forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        greetUser: () => {
            alert('Hello User!');
        }
    }));

    return (
        <div>
            This is the child component.
        </div>
    );
});

export default ChildComponent;

上述代码展示了如何设置自定义行为以便于父级调用[^2]。

#### 父组件定义

父组件负责创建并分配 ref 给子组件实例，之后便可以通过该引用触发子组件内预设的操作。

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const childRef = useRef(null);

    function handleClick() {
        if (childRef.current !== null && typeof childRef.current.greetUser === "function") {
            childRef.current.greetUser();
        }
    }

    return (
        <>
            <button onClick={handleClick}>Call Child Method</button>
            <ChildComponent ref={childRef} />
        </>
    );
}

export default ParentComponent;

这段代码说明了怎样在一个按钮点击事件处理器里安全地调用了子组件公开出来的 `greetUser()` 方法[^4]。

当用户按下按钮时，将会弹出消息框显示问候语句，这证明了父组件成功调用了子组件内的 JavaScript 函数[^1]。