本文主要和大家介绍react.js 父子组件数据绑定实时通讯的示例代码，react.js我自己还在摸索学习中，碰到父子组件数据绑定实时通讯的问题，研究了一下，分享给大家，也给自己留个笔记：
import React,{Component} from 'react'import ReactDOM from 'react-dom'class ChildCounter extends Component{ render(){ return( {this.props.count}
) }}/** 大家默认规定的一些步骤，方便大家看* 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(
{this.state.number}
) }}//渲染到页面ReactDOM.render(,document.querySelector("#root"))
登录后复制
相关推荐：
Vue2.0父子组件传递函数详解
vue中的event bus非父子组件通信详解
React高阶组件实例解析
以上就是实例详解react.js父子组件数据绑定实时通讯的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2787886.html
