时间戳

首页 > 解决方案 > 将函数作为道具传递给功能组件

javascript - 将函数作为道具传递给功能组件

问题描述

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

标签： javascriptreactjs

解决方案

第一个参数logThis将是道具对象本身。您需要解构该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>
)

推荐阅读