react.js 父子組件數(shù)據(jù)如何綁定實時通訊

這篇文章給大家分享的是有關(guān)react.js 父子組件數(shù)據(jù)如何綁定實時通訊的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

示例：

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>
    )
  }
}
/*
* 大家默認(rèn)規(guī)定的一些步驟，方便大家看
* 1.默認(rèn)值
* 2.初始化狀態(tài)
* 3.鉤子函數(shù)
* 4.方法函數(shù)
* */
class Counter extends Component{
  //默認(rèn)屬性對象
  static defaultProps={
    number:5
  }
  constructor(props){
    super(props);
    //獲取我的初始狀態(tài)
    this.state={
      number:props.number
    }
  }
  //鉤子函數(shù)
  componentWillMount(){
    console.log('組件將要掛載')
  }

  componentDidMount(){
    console.log("組件掛載完成")
  }

  handleClick=()=>{
    //this.setState方法是異步的，一個函數(shù)里面只能調(diào)用一次this.setState方法
    //調(diào)用多次會合并，只執(zhí)行一次
    this.setState((prev,next)=>({
      //上一次的狀態(tài)prev
      number:prev.number+1
    }),()=>{
      console.log("回調(diào)函數(shù)執(zhí)行")
    })

    // this.setState({index:this.state.index+1})

  }
  render(){
    //調(diào)用子組件ChildCounter，把當(dāng)前狀態(tài)值傳過去
    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"))

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