SOURCE

//子组件传递父组件：让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可

const CounterButton = (props) => {
  const { operator, btnClick } = props;
  return <button onClick={btnClick} style={{padding:'10px 20px',background:'#000', color: '#fff'}}>{operator}</button>
}
// class App extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       counter: 0
//     }
//   }

//   changeCounter(count) {
//     this.setState({
//       counter: this.state.counter + count
//     })
//   }

//   render() {
//     return (
//       <div>
//         <h2>当前计数: {this.state.counter}</h2>
//         <CounterButton operator="+1" btnClick={e => this.changeCounter(1)} />
//         <CounterButton operator="-1" btnClick={e => this.changeCounter(-1)} />
//       </div>
//     )
//   }
// }

const App =(props)=> {
 const [counter, setCounter]=React.useState(0);
 const changeCounter = (count) => {
      setCounter(counter + count);
  }
    return (
        <div>
            <h2 style={{color:'red'}}>当前计数: {counter}</h2>
            <CounterButton operator="+1" btnClick={e => changeCounter(1)} />
            <CounterButton operator="-1" btnClick={e => changeCounter(-1)} />
        </div>
    )
  
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

 

 
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>