React+TypeScript：子组件直接调用父组件回调的实现方案

解决方案一：使用React Context #

适合组件层级较深或多个Child需要共享回调的场景，无需手动传递props。

1. 在Parent组件文件中创建Context并定义类型
2. Parent作为Context Provider，传递回调函数给子树
3. Child通过useContext获取回调并调用

修改后的Parent与Child代码：

import React, { createContext, useContext } from "react";

export interface ChildProps {
    prop1: string;
    prop2: string;
}

// 定义Context的回调类型
type ParentCallbackContextType = (props: ChildProps) => void;

// 创建Context，允许初始值为undefined
const ParentCallbackContext = createContext<ParentCallbackContextType | undefined>(undefined);

export function Child({ prop1, prop2 }: ChildProps) {
    // 获取Context中的回调，添加非空断言确保可用（或加类型守卫判断）
    const parentCallback = useContext(ParentCallbackContext)!;

    return (
        <button
            onClick={() => {
                // 直接调用父组件的回调
                parentCallback({ prop1, prop2 });
                console.log(`child here with props ${prop1} and ${prop2}`);
            }}>
            <p>{prop1}</p>
            <p>{prop2}</p>
        </button>
    );
}

export default function Parent({
    children,
}: {
    children: React.ReactElement[];
}) {
    const parentCallback = ({ prop1, prop2 }: ChildProps) => {
        console.log(`parent here with child's props ${prop1} and ${prop2}`);
    };

    return (
        <ParentCallbackContext.Provider value={parentCallback}>
            <div>{children}</div>
        </ParentCallbackContext.Provider>
    );
}

Component1代码无需修改，保持原样即可。

解决方案二：克隆Children并注入Props #

适合Parent直接包裹Child的场景，通过克隆子元素自动注入回调属性。

1. 扩展ChildProps接口，添加回调属性
2. Parent遍历children，用React.cloneElement给每个Child注入回调
3. Child调用注入的回调

修改后的代码：

import React from "react";

// 扩展ChildProps，新增回调属性
export interface ChildProps {
    prop1: string;
    prop2: string;
    onCallParent: (props: ChildProps) => void;
}

export function Child({ prop1, prop2, onCallParent }: ChildProps) {
    return (
        <button
            onClick={() => {
                // 调用注入的父组件回调
                onCallParent({ prop1, prop2 });
                console.log(`child here with props ${prop1} and ${prop2}`);
            }}>
            <p>{prop1}</p>
            <p>{prop2}</p>
        </button>
    );
}

export default function Parent({
    children,
}: {
    children: React.ReactElement<ChildProps>[];
}) {
    const parentCallback = ({ prop1, prop2 }: ChildProps) => {
        console.log(`parent here with child's props ${prop1} and ${prop2}`);
    };

    // 遍历克隆每个Child，自动注入onCallParent属性
    const enhancedChildren = children.map(child =>
        React.cloneElement(child, {
            onCallParent: parentCallback,
        })
    );

    return <div>{enhancedChildren}</div>;
}

Component1代码无需修改，Parent会自动为每个Child注入回调。

注意事项 #

• 使用Context时，建议添加类型守卫（如if (parentCallback)）避免undefined报错，替代非空断言
• 克隆Children时，通过React.ReactElement<ChildProps>[]约束children类型，确保TypeScript做类型检查

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