将功能作为道具传递给功能组件

Question

尝试将功能作为道具传递给功能性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

Answer 1

第一个参数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>
)