06:React学习笔记. 组件通信

1.父传子

1.1 父组件通过props属性=值的形式来传递给子组件数据。
1.2 子组件通过props参数获取父组件传递过来的数据。
1.3 类组件和函数组件都可以。

2.子传父

1. React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可；
2. 子组件触发事件，调用父组件函数，同时把数据当做参数传递过去。

class  Parent extends Component {
	state = {
        detailChapterList :[]
    }

	 receiveList = (list) => {
	        console.log('app 48......接收来自子组件的列表数据')
	        this.setState(
	          {
	            detailChapterList:list
	          }
	        )
	    }
	  render(){
	
	    return <Son getDetailChapter={this.receiveList}></Son >
	  }
}

//子组件中
 giveChapter = (chapter) => {
        console.log('子组件 把数据给父组件')
        this.props.getDetailChapter(chapter)
    }
<Son onClick={this.giveChapter}/>

3. 同级组件通信

1. 用共同的父组件通信
2. 用context
3. 将数据统一管理在react-redux中