將函數作為道具傳遞給功能組件

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

從 props 解構 logThis

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

export default ChildComp

Answer 3

改成：

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

export default ChildComp