javascript - 将功能作为 Prop 传递给功能组件

我正在尝试将功能作为 Prop 传递给功能性的React组件。我不断收到错误logThis is not a function。
父组件是具有函数logToConsole的类组件。我总结了以下代码:

logToConsole = (value) => {
  console.log(value)
}
render(){
  return(
    <ChildComp logThis={this.logToConsole} />
  )
}

ChildComp是:

const ChildComp = (logThis) => (
  <button onClick={()=>logThis('test string')}>Click Here</button>
)

export default ChildComp

最佳答案

第一个参数logThis将是props对象本身。您需要解构logThis对象。

const ChildComp = ({ logThis }) => (
  <button onClick={() => logThis('test string')}>Click Here</button>
)

或者您可以从props访问它

const ChildComp = (props) => (
  <button onClick={() => props.logThis('test string')}>Click Here</button>
)