React：预期“onClick”侦听器是一个函数，而是获得“object”类型的值，但仅当我将其传递给子组件时

Question

我有一个基本的增量应用程序与以下代码反应。将函数传递到第一个按钮可以正常工作，但是将其传递到返回完全相同按钮的 handleClick子组件会出现错误： 。为什么它适用于第一个按钮，但不适用于子组件按钮，如何修复？提前致谢。IcrementButtonReact: Expected `onClick` listener to be a function, instead got a value of `object

import { useState } from "react";
import "./styles.css";

const IncrementButton = (handleClick) => {
  return (
    <button onClick={handleClick}>+</button>
  )
}

export default function App() {
  const [num, setNum] = useState(0)
  const handleClick = (e) => {
    e.preventDefault()
    console.log('clicked')
    setNum(prev => prev += 1)
  }
  return (
    <div className="App">
      <div>{num}</div>
      <button onClick={handleClick}>+</button>
      <IncrementButton handleClick={handleClick} />
    </div>
  );
}

Answer 1

由于 IncrementButton 是一个自定义组件，传递给它的所有 props 都作为对象发送，要访问它，您需要使用props.property. 有两种方法可以让您的代码正常工作。

1. 使用 props.property

const IncrementButton = (props) => {
  return (
    <button onClick={props.handleClick}>+</button>
  )
}

2. 解构 props 对象

const IncrementButton = ({handleClick}) => {
  return (
    <button onClick={handleClick}>+</button>
  )
}