如何将类父组件的函数传递给函数式子组件并解决调用报错

报错原因及解决方案 #

首先先修正代码里的明显笔误：父组件中console.log("test)缺少闭合双引号，改为console.log("test")。
出现logThis is not a function的报错，常见原因和对应解决方法如下：

• 父组件传递prop时误执行了函数：如果实际代码写成了logThis={this.logToConsole()}，传递给子组件的是函数执行后的返回值（默认为undefined）而非函数本身，去掉末尾的括号即可。
• prop名拼写不匹配：确认父组件传递的prop名和子组件调用的属性名完全一致，注意大小写敏感。
• 子组件导入错误：确认父组件中导入的ChildComp路径正确，没有加载到错误的组件。
• 可以在子组件代码开头打印props确认属性值：console.log(props)，直接查看logThis的实际类型和值。

更优实现方式 #

子组件优化 #

1. 解构props并设置默认值，即使父组件漏传对应prop也不会触发报错，无额外参数的场景下无需额外封装箭头函数调用：

const ChildComp = ({ logThis = () => {} }) => (
  <button onClick={logThis}>Click Here</button>
)
export default ChildComp

2. 如果使用TypeScript开发，给子组件添加props类型约束，编译阶段即可发现传值错误：

interface ChildCompProps {
  logThis: () => void
}
const ChildComp: React.FC<ChildCompProps> = ({ logThis }) => (
  <button onClick={logThis}>Click Here</button>
)

父组件优化 #

你当前使用箭头函数定义类方法的写法已经自动绑定了this指向，不需要额外修改，如果需要传递自定义参数给子组件的回调函数，可以按如下写法调整：

// 父组件传递参数
render(){
  return(
    <ChildComp logThis={() => this.logToConsole('自定义参数')} />
  )
}

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