我试图将一个函数作为props传递给一个功能性 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>
)
从 props 解构 logThis
const ChildComp = ({logThis}) => (
<button onClick={()=>logThis('test string')}>Click Here</button>
)
export default ChildComp
改成：
const ChildComp = (props) => (
<button onClick={()=>props.logThis('test string')}>Click Here</button>
)
export default ChildComp