import React, { Component, Fragment } from "react";

import ChildOne from "./ChildOne";

class CounterOne extends Component {

  constructor(props) {

    super(props);

    this.state = {

      number: 1,

    };

    this.handleBtnClick = this.handleBtnClick.bind(this);

  }

  //   点击增加2

  handleBtnClick() {

    const newNumber = this.state.number + 2;

    this.setState({

      number: newNumber,

    });

  }

  render() {

    return (

      <Fragment>

        <button onClick={this.handleBtnClick}>点击，数字加2</button>

        <ChildOne number={this.state.number} />

      </Fragment>

    );

  }

}

export default CounterOne;

----------------------------

import React, { Component, Fragment } from "react";

class ChildOne extends Component {

  render() {

    return (

      <Fragment>

        <p>{this.props.number}</p>

      </Fragment>

    );

  }

}

export default ChildOne;