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

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>
)

Answer 2

更改为：

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

export default ChildComp

Answer 3

从道具中破坏日志

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

export default ChildComp