React.js父组件无需顶层辅助函数直接调用子组件方法

React 本身基于单向数据流设计，默认不允许父组件直接访问子组件的内部作用域，所以你不能直接拿到子组件内部定义的函数调用。这个需求不需要在顶层创建全局辅助函数就能实现，使用 React 内置的 ref 相关API即可完成，注意这种方式属于命令式操作，仅推荐用于表单提交、输入框聚焦这类无法通过声明式写法实现的场景，常规业务优先用状态提升、props传回调的方式实现，避免破坏组件封装性。

实现核心逻辑 #

• 目标子组件用forwardRef包裹，支持接收父组件传入的ref实例
• 子组件内部通过useImperativeHandle指定需要对外暴露的内部方法，未暴露的内部逻辑依然保持私有
• 中间嵌套的父组件（比如示例中的ParentDiv）不需要额外做全局逻辑封装，只需要将ref透传给目标子组件即可

对应修改后的示例代码 #

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

export const AppComponent = () => {
    return (
        <ParentDiv>
            <ChildDiv />
        </ParentDiv>
    );
}

const ParentDiv = (props) => {
    // 初始化ref，用来承接子组件暴露的方法
    const childActionRef = useRef(null);

    const triggerChildSubmit = () => {
        // 安全调用子组件暴露的方法
        childActionRef.current?.submitButton();
    }

    return (<div>
        Parent
        {/* 给插槽传入的子组件挂载ref，不需要修改App组件里的ChildDiv调用逻辑 */}
        {React.cloneElement(props.children, { ref: childActionRef })}
        <button onClick={triggerChildSubmit}>do something...</button>
    </div>);
}

const ChildDiv = forwardRef((props, ref) => {

    const submitButton = () => {
        console.log('do something...');
    }

    // 仅对外暴露指定方法，其余内部逻辑不会被父组件访问
    useImperativeHandle(ref, () => ({
        submitButton
    }), []);

    return (<div>Child</div>);
})

注意：如果你的嵌套层级更深，可以逐层透传ref，不需要把函数或状态提升到全局顶层作用域，所有逻辑都可以收敛在组件内部维护。

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