react.js 父子组件数据绑定实时通讯的示例代码

import React,{Component} from 'react'import ReactDOM from 'react-dom'class ChildCounter extends Component{  render(){    return(      <div style={{border:'1px solid red'}}>        {this.props.count}      </div>    )  }}/** 大家默认规定的一些步骤，方便大家看* 1.默认值* 2.初始化状态* 3.钩子函数* 4.方法函数* */class Counter extends Component{  //默认属性对象  static defaultProps={    number:5  }  constructor(props){    super(props);    //获取我的初始状态    this.state={      number:props.number    }  }  //钩子函数  componentWillMount(){    console.log('组件将要挂载')  }  componentDidMount(){    console.log("组件挂载完成")  }  handleClick=()=>{    //this.setState方法是异步的，一个函数里面只能调用一次this.setState方法    //调用多次会合并，只执行一次    this.setState((prev,next)=>({      //上一次的状态prev      number:prev.number+1    }),()=>{      console.log("回调函数执行")    })    // this.setState({index:this.state.index+1})  }  render(){    //调用子组件ChildCounter，把当前状态值传过去    return(      <div>        <p>{this.state.number}</p>        <button onClick={this.handleClick}>+</button>        <ChildCounter count={this.state.number}></ChildCounter>      </div>    )  }}//渲染到页面ReactDOM.render(<Counter></Counter>,document.querySelector("#root"))