react.js父子组件数据如何绑定实时通讯
这篇文章给大家分享的是有关react.js 父子组件数据如何绑定实时通讯的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联公司始终坚持【策划先行，效果至上】的经营理念，通过多达10余年累计超上千家客户的网站建设总结了一套系统有效的营销解决方案，现已广泛运用于各行各业的客户，其中包括：木制凉亭等企业，备受客户赞誉。
示例：
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(
)
}
}
//渲染到页面
ReactDOM.render(
,document.querySelector("#root"))
感谢各位的阅读！关于“react.js 父子组件数据如何绑定实时通讯”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
分享文章：react.js父子组件数据如何绑定实时通讯
链接地址：
http://cdysf.com/article/ppsdge.html
