我有一个应用组件，其中包含两个子组件 Conter 和 Button。单击按钮时，计数器应递增。因此，我在应用程序组件中维护一个状态，它有一个函数 handleClick()，该函数作为 prop 传递给按钮组件。

import React from  'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      value: 0,
    };
  }

  handleClick() {
    console.log("handleClick")
    this.setState({
      value: this.state.value + 1,
    });
  }

  

  render() {
    return (
      <div className="frame">
        <Counter value={this.state.value} />
        <Button onClick={this.handleClick} />
        
      </div>
    )
  }
}

class Counter extends React.Component {
  render() {
    
    return <h1> {this.props.value} </h1>
  }
}

class Button extends React.Component {
  render() {
    // console.log("inside button")
    return <button onClick={() => {
      this.props.handleClick();
      
    }}>  Click </button>
  }
}



export default App;

但是，当我单击按钮时，出现错误

App.js:43 Uncaught TypeError: this.props.handleClick is not a function
    at onClick (App.js:43:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)

我确实经历了 这个 和[ TypeError 'x' is not a function [closed] ] 2 ，但是在那里没有找到我的解决方案。