react组件间的数据传递
1.兄弟组件不能直接相互传送数据,此时可以将数据挂载在父组件中,由两个组件共享
2.子组件向父组件通讯,可以通过父组件定义事件(回调函数),子组件调用该函数,通过实参的形式来改变父组件的数据来通信
//子组件
this.props.onCommentSubmit({author, content, date:new Date().getTime()});
//父组件
render(){
return(
<div className="m-index">
<div>
<h1>评论</h1>
</div>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)} />
</div>
)
}
3.非父子组件间的通信:可以使用全局事件来实现组件间的沟通,React中可以引入eventProxy模块,利用eventProxy.trigger()
方法发布消息,eventProxy.on()
方法监听并接收消息。
4.组件间层级太深,可以使用上下文方式,让子组件直接访问祖先的数据或函数,通过this.context.xx