如何将App组件内关联状态的未导出函数传递给子组件

核心错误点 #

• 错误1：不应该直接导入App组件内部的myFunction。组件内部定义的函数绑定了当前组件的state、props上下文，脱离App组件实例单独导入使用时，无法访问到App内部的data、setItemColor等状态和方法，必然报错。
• 错误2：传递函数时加了括号执行click={myFunction()}，这种写法会在组件渲染阶段直接执行函数，而不是把函数作为回调传给子组件触发时调用。
• 错误3：Item组件中错误将函数类型的props.click拼接为类名字符串，会导致类名异常，同时也不符合逻辑。

具体修复步骤 #

1. 调整App.tsx，将函数通过props传递给Child组件 #

在App组件渲染Child的位置，把myFunction作为props传入：

// App.tsx 中渲染Child组件的位置
<Child myFunction={myFunction} />

2. 调整Child.tsx，接收props并透传给Item #

删除错误的import语句，从当前组件的props中拿到传递的函数，透传给Item时不要加执行括号：

// Child.tsx
// 删掉 import myFunction from '../App' 这行错误代码
function Child(props) {
  // 原有其他逻辑
  return <Item click={props.myFunction}></Item>
}

3. 修正Item组件的逻辑 #

移除类名中错误拼接的props.click，正确绑定点击事件即可：

function Item(props) {
    // 类名不要拼接函数类型的props.click，按需调整你的类名逻辑即可
    let colorHeaderClassName = `selected`; 

    return (
        <>
            <Button
                onClick={props.click}
                className={colorHeaderClassName}
            />
        </>
    );
}

可选：Typescript类型优化 #

可以给组件加上props类型定义，避免类型报错：

// Item组件props类型示例
type ItemProps = {
  click: (e: React.FormEvent) => void
}
function Item(props: ItemProps) {
  // 组件原有逻辑
}

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