React中如何为多个子组件传递多个未显式声明的未知props？

方案1：修正现有透传写法（适用层级较少的场景） #

你现有思路是可行的，仅需要修正顶层组件传递对象时的语法错误即可实现需求：中间层不需要感知具体传递的属性，仅需透传分组后的属性对象，底层组件灵活接收所有传入属性。
修正后的完整代码如下：

顶层组件代码 #

export const Top = () => {
    return(
        <Middle
            // 将传给BottomA的所有属性包装为对象
            botA={{propA: true, propB: false}}
            // 将传给BottomB的所有属性包装为对象
            botB={{propA: 1, propB: 2}}
        />
    );
}

中间层组件代码（无需改动） #

中间层仅需要接收分组对象，直接透传即可，不需要关心对象内的具体字段：

export const Middle = ({botA, botB}) => {
    return(
        <>
            <BottomA {...botA} />
            <BottomB {...botB} />
        </>
    );
}

底层组件代码（无需改动） #

底层组件可直接接收所有传入的未知属性灵活处理：

export const BottomA = ({...unknownProps}) => {
    // 自定义处理unknownProps
    return(
        ...
    );
}

export const BottomB = ({...unknownProps}) => {
    // 自定义处理unknownProps
    return(
        ...
    );
}

方案2：使用React Context（适用层级较深的场景） #

如果组件嵌套层级超过3层，中间还有多层无关组件，可使用Context避免逐层透传的冗余代码（即解决Props Drilling问题）：

1. 先创建公共Context #

import { createContext, useContext } from 'react';

const BottomPropsContext = createContext();

2. 顶层组件提供Context值 #

export const Top = () => {
    const propsConfig = {
        botA: {propA: true, propB: false},
        botB: {propA: 1, propB: 2}
    }
    return(
        <BottomPropsContext.Provider value={propsConfig}>
            <Middle />
        </BottomPropsContext.Provider>
    );
}

3. 中间层完全不需要处理相关属性 #

export const Middle = () => {
    // 中间层无需接收、透传任何相关属性
    return(
        <>
            <BottomA />
            <BottomB />
        </>
    );
}

4. 底层组件直接从Context取值 #

export const BottomA = () => {
    const { botA: unknownProps } = useContext(BottomPropsContext);
    // 自定义处理unknownProps
    return(...);
}

export const BottomB = () => {
    const { botB: unknownProps } = useContext(BottomPropsContext);
    // 自定义处理unknownProps
    return(...);
}

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