React多级组件传值：如何在各层级处理数据且不每层创建新函数？

可以实现这个需求，核心思路是在中间层（Child）定义一个稳定的处理函数，先加工从子组件（GrandChild）传来的数据，再调用父组件传入的函数。用useCallback可以保证函数引用稳定，不会因为组件重渲染而创建新函数。

修改后的完整代码： #

Parent组件

import { useCallback } from 'react';

function Parent() {
    // 用useCallback确保函数引用稳定（可选，但能优化子组件渲染）
    const parentFunction = useCallback((str) => {
        console.log('Output processed by parent', str);
    }, []);

    return (
        <div>
            <Child passedFunc={parentFunction} />
        </div>
    );
}

Child组件

import { useCallback } from 'react';

function Child({ passedFunc }) {
    // 定义中间处理函数，用useCallback包裹保证引用稳定
    const handleChildProcess = useCallback((dataFromGrandChild) => {
        // 这里写Child层的数据处理逻辑
        const processedData = `[Child processed] ${dataFromGrandChild}`;
        // 处理完传给父组件
        passedFunc(processedData);
    }, [passedFunc]);

    return (
        <div>
            <GrandChild passedFunc={handleChildProcess} label="first" />
            <GrandChild passedFunc={handleChildProcess} label="second" />
        </div>
    );
}

GrandChild组件

import { useCallback } from 'react';

function GrandChild({ passedFunc, label }) {
    // 用useCallback保证点击函数引用稳定
    const handle_click = useCallback(() => {
        passedFunc(`${label}something`);
    }, [passedFunc, label]);

    return (
        <div onClick={handle_click}>{label}</div>
    );
}

关键说明： #

• 用useCallback包裹处理函数，只有当依赖项变化时才会重新创建函数，既避免了每次组件渲染都生成新函数的问题，也能减少子组件的不必要重渲染。
• 中间层（Child）的handleChildProcess先接收GrandChild传来的数据，完成自定义处理后，再调用父组件传入的passedFunc，实现了数据逐层处理的需求。
• 修正了原代码中GrandChild组件里的拼写错误passedFunk为passedFunc。

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