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"))

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# reactjs # 父子组件通讯 # react父子组件实时通讯 # 关于antd tree和父子组件之间的传值问题(react 总结) # React 非父子组件传参的实例代码 # React 父子组件通信的实现方法 # React父子组件间的传值的方法 # react 父子组件之间通讯props # 详解React之父子组件传递和其它一些要点 # React父子组件传值(组件通信)的实现方法 # 还在 # 给大家 # 也给 # 绑定 # 回调 # 留个 # 大家多多 # 默认值 # 一个函数 # lt # div # return # extends # render # px # solid # border # style # red # ChildCounter

返回目录在线咨询

上一篇：网站导航设计与收录的关系_SEO优化教程
下一篇：python对列表进行永久性或临时排序的方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求