组件通信
程序员文章站
2022-06-06 23:38:21
...
父子组件通信：
通过props传递数据
如果子组件要将信息回传给父组件:示例：新增的用户信息。父组件给子组件传递state时新增一个执行函数，并在父组件里定义这个执行函数的动作。而后子组件可以在自身处理事件中调用此函数，以此达到回传state的目的。注意调用时要用props.
兄弟组件通信：
不能直接通信，需要借助状态提升，把组件间需要共享的状态保存到距离它们最近的共同父组件内，任意一个兄弟组件都可以通过父组件传递的回调函数来修改共享状态。然后通过父组件里的props向下传递给所有兄弟组件，从而完成兄弟组件的通信。
样例参考detail和list.
所有需要由子组件返回state给父组件的，都需要在父组件里建立处理函数，然后传递给子组件。
组件层级太深时，用Context：
React提供了context上下文，让任意层级的组件都可以获取父组件中的状态和方法。
创建方法：在提供context的组件内新增一个getChildContext方法，返回context对象，然后在组建的childContextTypes属性上定义context对象的属性的类型信息。
如，在父组件中这样定义：
getChildcontext(){
return {onAddUser: this.handleAddUser};
}
// 声明
当前组件名.childContextTypes={
onAddUser : PropTypes.func
}
子组件如果要使用父组件里的方法和状态，则只需要声明：
当前组件名.ContextTypes={
onAddUser : PropTypesfunc
}
而后在使用的时候，this.context.onAddUser()