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

results matching ""

    No results matching ""