1.父传子
1.1 父组件通过props属性=值的形式来传递给子组件数据。
1.2 子组件通过props参数获取父组件传递过来的数据。
1.3 类组件和函数组件都可以。
2.子传父
- React中同样是通过props传递消息,只是让父组件给子组件传递一个回调函数,在子组件中调用这个函数即可;
- 子组件触发事件,调用父组件函数,同时把数据当做参数传递过去。
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. 同级组件通信
- 用共同的父组件通信
- 用context
- 将数据统一管理在react-redux中