react.js 父子組件數據如何綁定實時通訊

這篇文章給大家分享的是有關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"))

感謝各位的閱讀！關于“react.js 父子組件數據如何綁定實時通訊”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！